什么是BOM？
BOM
window
window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，有是ECMAScript规定的Global对象
Global对象 --> 全局对象
Global对象 --> 全局对象
Window对象的方法
01
语法window.alert("content");
功能显示带有一段消息和一个确认按钮的警告框
02
语法：window.confirm("message")
功能：显示一个带有指定消息和OK与取消按钮的对话框
03
语法：window.prompt("text,defaultText")
参数说明：
text：纯文本
defaultText：默认输入文本(可不填)
返回值：如果用户点击提示框取消按钮，则返回null
如果用户单击确认按钮，则返回输入字段当前显示文本
04
语法window.open(pageURL,name,parameyers);
功能:打开一个新的浏览器窗口或查找一个已命名的窗口。
参数：
pageURL：子窗口路径
name：子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters：窗口参数（各参数用逗号隔开）
parameters：窗口参数
05
语法：window.close()
功能：关闭当前浏览器窗口
定时器
注释：JS是单线程语言，单线程就是所有执行代码必须按照顺序执行
01.超时调用
语法：setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式
参数说明：
1.code：要调用的函数或要执行的JS代码串
2.millisec:执行代码前等待的毫秒数
02.清除超时调用
语法：clearTimeout(id_of_settimeout)
功能:取消setTimeout()方法设置的timeout
参数说明：
1.id_of_settTiemout:由setTimeout()返回的ID值，改值标识要取消的延迟执行代码快
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
间隔调用
01语法：setInterval(code,millisec)
功能：每隔指定时间执行一次代码
参数说明：
1.code：代码
2.millisec：周期执行or调用code间隔，以毫秒计算
02语法：clearInterval()
功能：结束间隔调用
03Location对象常用属性
01
语法:location.href
功能:返回当前加载页面完整的URL
说明：location.href与window.location.href等价
02
语法：location.hash //(获取锚点#)
功能:返回URL中的hash(#号后跟零或多个字符)，如果不包含返回空中飞车
03
语法：location.host
功能:返回服务器名称和端口号(如果有)
04
语法：location.houstname
功能:返回不带端口号的服务器名称
05
语法:location.pathname
功能:返回URL中的目录和(或)文件名
06
语法：location.port
功能:返回指定URL中指定的端口号，如果没有，返回空字符串
07
语法：location.protocol
功能：返回页面使用协议
08
语法：location.search
功能：返回URL的查询字符串。这个字符串以问好开头
09
语法：location.replace(url)
功能：重新定义URL
说明：不会在历史记录中生成新记录
10
语法：location.reload()
功能:重新加载当前页面
说明：
location.reload() 重缓存中加载
location.reload(true)重服务器中重新请求页面
history对象
保存用户在浏览器上的访问页面历史记录
01
语法：history.back()
功能：回到历史记录上一步
说明：相当于使用了history.go(-1)
02
语法：history.forward()
功能：回到历史纪录的下一步
说明：相当于使用了history.go(1)
03
语法history.go(-n)
功能:回到历史记录的前N步
语法history.go(n)
回到历史纪录的后n步
Navigator对象（OS）
UserAgent:用来识别浏览器名称，版本，引擎，and，OS等信息
Screen
包含客户端显示屏幕信息
01.语法screen.availWidth
返回可用屏幕宽度
02语法screen.availHeight
返回可用屏幕高度
image.png
<body>
<div id="box">
Google大法
<input type="submit" value="删 除" id="subMT"/>
</div>
<script type="text/javascript">
var get_subMT = document.getElementById('subMT');
get_subMT.onclick=function(){
var get_box = document.getElementById('box');
var c = confirm("你确定要删除吗？");
// console.log(c);
if(c==true){
box.style.display='none';
}else{
var sd=prompt("输入修改这里的内容");
box.innerHTML=sd;
}
}
</script>
</body>
<script type="text/javascript">
window.onload=function(){
window.open("https://www.google.com","Google",'heigth:450px,width:450px,left:450px,top:450px,toolbar=no,menubar=no,scrollbars:no,location:no,status:no');
}
</script>
<script type="text/javascript">
window.onload=function(){
var stime=setTimeout(function(){setTimeout(console.log("STEtimeout")},1000 );
setTimeout(function(){clearTimeout(stime)},5000);
}
</script>
<script type="text/javascript">
var c=setInterval(function(){console.log("hello")},1000);
clearInterval(c);
</script>
location
location
<body>
<input type="button" name="" id="but" value="BU KK" style="background: aquamarine;"/>
<script type="text/javascript">
var get_but=document.getElementById('but');
get_but.onclick=function(){
sq = confirm("是否刷新页面");
if(sq == true){
location.reload();
}else{
location.replace('https://www.adapa.online');
}
}
</script>
</body>
<script type="text/javascript">
//检查浏览器类型
function getBrowser(){
var explorer = navigator.userAgent.toLowerCase();
if(explorer.indexOf('msie')>-1){
browser = 'IE';
}else if(explorer.indexOf('chrome')>-1){
browser = 'chrome';
}else if(explorer.indexOf('opera')>1){
browser = 'opera';
}else if(explorer.indexOf('safari')>1){
browser = 'safari';
}
return browser;
}
var explorer = getBrowser();
alert(explorer);
</script>
网友评论