BOM概述
浏览器对象模型（BOM）使 JavaScript 有能力与浏览器"对话"。
浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。
浏览器对象模型（BOM）可以使我们通过JS来操作浏览器，在BOM中为我们提供了一组对象，用来完成对浏览器的操作，常见的BOM对象如下：
Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用。
Window对象
弹出框
JavaScript 有三种类型的弹出框：警告框、确认框和提示框。
警告框
如果要确保信息传递给用户，通常会使用警告框。当警告框弹出时，用户将需要单击“确定”来继续。
语法
window.alert("sometext");注意：window.alert() 方法可以不带 window 前缀来写。
实例
alert("我是一个警告框！");确认框
如果您希望用户验证或接受某个东西，则通常使用“确认”框。
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法
window.confirm("sometext");注意：window.confirm() 方法可以不带 window 前缀来编写。
实例
var r = confirm("请按按钮");
if (r == true) {
x = "您按了确认！";
} else {
x = "您按了取消！";
}提示框
如果您希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
语法
window.prompt("sometext","defaultText");注意：window.prompt() 方法可以不带 window 前缀来编写。
实例
var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
console.log(person);
}定时事件
JavaScript 可以在时间间隔内执行，这就是所谓的定时事件（ Timing Events）。
window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件。
通过 JavaScript 使用的有两个关键的方法：
setTimeout(code, millisec)
code 为指定要执行的js代码
milisec 为在执行代码前需要等待的时间(毫秒)
在等待指定的毫秒数后执行函数。
setInterval(code, millisec)
code 为每个周期所执行的js代码
milisec 每隔多少时间(毫秒)执行函数中的方法
等同于 setTimeout()，但持续重复执行该函数。
setTimeout() 和 setInterval() 都属于 window 对象的方法。
延时器
setTimeout() 方法：延时器
window.setTimeout(function, milliseconds);注意：window.setTimeout() 方法可以不带 window 前缀来编写。
案例演示：
var id=setTimeout(()=>{
alert("123");
},1000);
clearTimeout(id);//clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。定时器
setInterval() 方法：定时器
setInterval() 方法在每个给定的时间间隔重复给定的函数。
window.setInterval(function, milliseconds);注意：window.setInterval() 方法可以不带 window 前缀来写。
案例演示：
var time=setInterval(()=>{
alert("+1");
},1000);
clearTimeout(time);//clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。常用窗口属性
两个属性可用用于确定浏览器窗口的尺寸。
这两个属性都以像素返回尺寸：
window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
浏览器窗口（浏览器视口）不包括工具栏和滚动条。
对于 Internet Explorer 8, 7, 6, 5：
document.documentElement.clientHeight
document.documentElement.clientWidth
或
document.body.clientHeight
document.body.clientWidth
一个实用的 JavaScript 解决方案（包括所有浏览器）：该例显示浏览器窗口的高度和宽度（不包括工具栏和滚动条）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
console.log(w);
console.log(h);
</script>
</body>
</html>其它窗口方法
window.open() ：打开新的窗口
语法介绍：
window.open(URL,name,specs,replace);window.close() ：关闭当前窗口
语法介绍：
window.close();案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">打开新窗口</button>
<button id="btn2">关闭打开的窗口</button>
<script>
var btn1=document.getElementById("btn1");
var btn2=document.getElementById("btn2");
var newWindow;
btn1.onclick=function(){
newWindow=window.open("http://www.163.com");
}
btn2.onclick=function(){
newWindow.close();
}
</script>
</body>
</html>Location对象
Location对象中封装了浏览器的地址栏的信息，如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
常用方法
assign()：用来跳转到其它的页面，作用和直接修改location一样
location.assign("https://www.baidu.com");reload()：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.reload(true);replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退
location.replace("https://www.baidu.com");案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">assign</button>
<button id="btn2">replace</button>
<button id="btn3">reload</button>
<script>
document.getElementById("btn1").onclick=function(){
location.assign("http://www.163.com");
};
document.getElementById("btn2").onclick=function(){
location.reload();
};
document.getElementById("btn3").onclick=function(){
location.replace("http://www.163.com");
};
</script>
</body>
</html>History对象
History对象可以用来操作浏览器向前或向后翻页
常用方法
back()：可以回退到上一个页面，作用和浏览器的回退按钮一样
history.back();forward()：可以跳转到下一个页面，作用和浏览器的前进按钮一样
history.forward();go()：可以用来跳转到指定的页面，它需要一个整数作为参数
1：表示向前跳转一个页面，相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面，相当于back()
-2：表示向后跳转两个页面
history.go(-2);案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#">跳转</a><button onclick="history.forward()">前进</button>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="history.back()">后退</button>
<button onclick="history.go(-1)">返回上一页</button>
<button onclick="alert(history.length)">历史数量</button>
</body>
</html>
668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
