JavaScript BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。
BOM（Browser Object Model (BOM)）即浏览器对象模型
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性，现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性，因此它经常作为 BOM 的方法和属性被提到
BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分
常见的BOM对象:
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是js中的顶级的对象）
Screen：代表用户的屏幕信息
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作
window对象
windows对象是JavaScript中的顶级对象，所有浏览器都支持 window 对象,它表示浏览器的窗口
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员，在调用的时候可以省略window
全局变量是 window 对象的属性
全局函数是 window 对象的方法
甚至 HTML DOM 的 document 也是 window 对象的属性之一：
window.document.getElementById("header");
或者
document.getElementById("header");
window对象的方法
1、alert()
window.alert("Hello world!"); //显示带有一段消息和一个确认按钮的警告框
2、confirm()
window.confirm("Hellomegs"); //显示一个带有指定消息和OK及取消按钮的对话框
出现两个按钮：确定和取消
3、prompt()
window.prompt("content"); //用户输入内容，content为提示内容
4、open(pageURL,name,parameters)
pageURL：子窗口路径
name：子窗口句柄。（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）
parameters ：窗口参数(各参数用逗号分隔)
window.open(pageURL,name,parameters) //打开一个新的浏览器窗口或查找一个已命名的窗口
| width | 窗口宽度 | height | 窗口高度 |
|---|---|---|---|
| left | 窗口X轴坐标 | top | 窗口Y轴坐标 |
| toolbar | 是否显示浏览器工具栏 | menubar | 是否显示菜单栏 |
| scrollbars | 是否显示滚动条 | location | 是否显示地址字段 |
| status | 是否显示添加状态栏 |
5、close()
window.close(); //关闭浏览器窗口
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
- window.innerWidth - 浏览器窗口的内部宽度
- window.innerHeight - 浏览器窗口的内部高度
对于 Internet Explorer 8、7、6、5：
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）
其他 Window 方法
一些其他方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Window Screen
包含有关客户端显示屏幕的信息
window.screen 对象在编写时可以省略 window
属性：
1、screen.availWidth
性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏
console.log("页面宽："+screen.availWidth) //返回可用的屏幕宽度
2、screen.availHeight
属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏
console.log("页面高："+screen.availHeight) //返回可用的屏幕高度
Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面
属性：
| location.herf | 返回当前加载页面的完整URL |
|---|---|
| location.hash | 返回URL中的hash（#号后 跟零或多个字符），如果不包含则返回空字符串 |
| location.host | 返回服务器名称和端口号 |
| location.hostname | 返回 web 主机的域名 |
| location.pathname | 返回当前页面的路径和文件名 |
| location.port | 返回URL中指定的端口号，如果没有，返回空字符串 |
| location.protocol | 返回所使用的 web 协议（http:// 或 https://） |
| location.search | 返回URL的查询字符串，这个字符串以问号开头 |
Window History
window.history 对象包含浏览器的历史
| history.back() | 回到历史记录的上一步 |
|---|---|
| history.forward() | 回到历史记录的下一步 |
| history.go(-n) | 回到历史记录的前n步 |
| history.go(n) | 回到历史记录的后n步 |
Window Navigator
window.navigator 对象包含有关访问者浏览器的信息
UserAgent：用来识别浏览器名称、版本、引擎 以及操作系统等信息的内容，可以判断设备的终端是移动还是PC
let agent = window.navigator.userAgent;
if(/chrome/i.test(agent)){
alert("谷歌");
}else if(/firefox/i.test(agent)){
alert("火狐");
}else if(/msie/i.test(agent)){
alert("低级IE浏览器");
}else if("ActiveXObject" in window){
alert("低级IE浏览器");
}
定时器
通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，这称之为计时事件。
超时调用：setTimeOut(code,millisec）
code：要调用的函数或要执行的JavaScript代码串
millisec：在执行代码前需等待的毫秒数
在指定的毫秒数后调用函数或计算表达式,setTimeout()只执行code一次
清除超时调用:clearTimeout（id_of_settimeout）
id_of_settimeout ：由setTimeout（）返回的ID值，该值标识要取消的延迟执行代码块
取消由setTimeout()方法设置的timeout
间歇调用：setInterval(code,millisec)
每隔指定的时间执行一次代码
单击开始计时按钮后，程序开始从 10 以秒倒计时
<body>
<input type="button" value="倒计时开始10" id="btn" disabled />
<script>
var btn = document.getElementById("btn");
var num = 10;
var timerId = setInterval(function() {
num--;
btn.value = "到时器开始" + num;
if (num == 0) {
clearInterval(timerId);
btn.disabled = false;
btn.value = "可以点了";
}
}, 1000);
</script>
</body>
人生最可贵的事情，便是少年的迷茫。 ——三毛
原文地址：https://www.cnblogs.com/qimuz/p/12676532.html