BOM（浏览器对象模型）是使用JavaScript开发Web应用程序的核心，提供了与网页无关的浏览器功能对象。

window对象

是BOM的核心，表示浏览器的实例。

window对象在浏览器中具有两重身份：

ECMAScript中的Global对象；
浏览器窗口的JavaScript接口。

意味着网页中定义的所有变量、对象和函数都以window作为其Global对象，都可访问其上定义的parseInt()等全局方法。

Global作用域

由于window对象被复用为ECMAScript的Global对象，所以通过var声明的所有全局变量和函数都变成window对象的属性和方法。

var age = 21;
var sayAge = () => alert(this.age);

alert(window.age);	// 21
sayAge();		// 21
window.sayAge();	// 21

若var替换成let或const，则不会把变量添加给全局对象。

访问未声明的变量会抛出错误，但可以在window对象上查询是否存在可能未声明的变量。

var newValue = oldValue;	// 抛出错误，oldValue未声明
var newValue = window.oldValue；	
// 此处正常，因为这里是属性查询，newValue被设置为undefined

窗口关系

top对象始终指向最上层（最外层）窗口，即浏览器窗口本身。 parent对象始终指向当前窗口的父窗口。 self对象是终极window属性，始终会指向window。实际上，self和window是同一个对象，之所以还要暴露self，是为了和top、parent保持一致。

这些属性都是window对象的属性，访问window.parent、window.top和window.self都可以。

窗口位置

screenLeft和screenTop，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是CSS像素。

可使用moveTo（）和moveBy（）方法移动窗口，都接受两个参数，其中moveTo（）接收要移动到的新位置的绝对坐标x和y；而moveBy（）接收相对当前位置在两个方向上移动的像素数。

窗口大小

所有现代浏览器都支持4个属性： innerWidth和innerHeight，返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）；

outerWidth和outerHeight，返回浏览器窗口自身的大小（不管是在最外层window上使用，还是在窗格<frame>中使用）。

document.documentElement.clientWidth和document.documentElement.clientHeight，返回页面视口的宽度和高度。

可以使用resizeTo（）和resizeBy（）方法调整窗口大小，都接收两个参数， resizeTo（）接收新的宽度和高度值，而resizeBy（）接收宽度和高度各要缩放多少。缩放窗口的方法只能应用到最上层的window对象。

定时器

setTimeout（）

用于指定在一定时间后执行某些代码。接收两个参数：要执行的代码和在执行回调函数前等待的时间（毫秒）。

第一个参数可以是包含JS代码的字符串或者一个函数。第二个参数是要等待的毫秒数。

setTimeout(() => alert("Hello!!!"), 1000);

调用setTimeout（）时，会返回一个表示该超时排期的数值ID，此超时ID是被排期执行代码的唯一标识符，可用于取消该任务。要取消等待中的排期任务，可调用clearTimeout（）方法并传入超时ID。

只要是在指定时间到达之前调用clearTimeout（），就可以取消超时任务。

setInterval（）

用于指定每隔一段时间执行某些代码，直到取消循环定时或者页面卸载。接收两个参数：要执行的代码（字符串或函数），以及把下一次执行定时代码的任务添加到队列要等待的时间（毫秒）。

setTimeout(() => alert("Hello!!!"), 1000); // 间隔时间为1000毫秒执行时间短、非阻塞的回调函数比较适合setInterval（）。

setInterval（）方法也会返回一个循环定时ID，可用于在未来某个时间点上取消循环定时。要取消循环定时，可调用clearInterval（）并传入定时ID。

相对于setTimeout（）而言，取消定时能力对setInterval（）更加重要。

let num = 0, intervalId = null;
let max = 10;

let incrementNumber = function(){
	num++;
	
	if(num == max){	// 如果达到最大值，则取消所有未执行的任务
		clearInterval(intervalId);
		alert("Done");
	}

}
intervalId = setInterval(incrementNumber, 500);

也可以使用setTimeout（）来实现以上模式。

let num = 0;
let max = 10;

let incrementNumber = function(){
	num++;
	
	if(num < max){	// 如果还没达到最大值，再设置一个超时任务
		setTimeout（incrementNumber, 500）;
	} else{
		alert("Done");
	}
}
setTimeout(incrementNumber, 500);

使用setTimeout（），不一定要记录超时ID，因为它会在条件满足时自动停止，否则会自动设置另一个超时任务。这个模式是设置循环任务的推荐做法。

一般来说，最好不要使用setInterval（），因为一个任务结束和下一个任务开始之间的时间间隔是无法保证的，有些循环定时任务可能会因此而被跳过。

系统对话框

警告框

通过调用alert（）来显示，接收一个要显示给用户的字符串。若传的参数不是一个原始字符串，则会调用这个值的toString（）方法将其转换为字符串。

通常用于向用户显示一些他们无法控制的消息，比如报错。对话框只有一个“OK”（确认）按钮。

确认框

通过调用confirm（）来显示，与警告框类似，都会向用户显示消息。

确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。

提示框

通过调用prompt（）方法来显示，用于提示用户输入信息，除了OK和Cancel按钮，还会显示一个文本框，让用户输入内容。

prompt（）接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）

location对象

提供了当前窗口中加载文档的信息，以及通常的导航功能。既是window的属性，也是document的属性。即window.location和document.location指向同一个对象。

图片.png

操作地址

三种修改浏览器地址的方法：

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";		// 最常见

修改location对象的属性也会修改当前加载的页面，其中hash、search、hostname、pathname和port属性被设置为新值之后都会修改当前URL。

使用replace（）方法可以替换浏览器历史记录中当前显示的页面，并导航到新URL。接收一个URL参数。

最后一个修改地址的方法是reload（），它能重新加载当前显示的页面。若页面自上次请求以来从未修改过，浏览器可能会从缓冲中加载页面。若想强制从服务器重新加载，可以给reload（）方法传个true参数。最好把reload（）作为最后一行代码。

navigator对象

现在已经成为客户端标识浏览器的标准。只要浏览器启用JavaScript，navigator对象就一定存在。

检查插件

除IE10及更低版本外的浏览器，都可以通过plugins数组来确定。这个数组每一项都包含如下属性：

name：插件名称。
description：插件介绍。
filename：插件的文件名。
length：由当前插件处理的MIME类型数量。

检测插件就是遍历浏览器中可用的插件，并逐个比较插件的名称。

旧版本IE中的插件检测，要使用专有的ActiveXObject，并尝试实例化特定的插件。要检测某个插件就必须知道其COM标识符，如Flash的标识符是“ShockwaveFlash.ShockwaveFlash”。

注册处理程序

现代浏览器支持navigator上的registerProtocolHandler（）方法，可以把一个网站注册为处理某种特定类型信息应用程序。

使用此方法，必须传入三个参数：要处理的协议（如“mailto”或“ftp”）、处理该协议的URL，以及应用名称。

// 把一个Web应用程序注册为默认邮件客户端
navigator.registerProtocolHandler("mailto",
	"http://www.somemailclient.com?com=%s",	// %s表示原始的请求
	"Some Mail Client");

screen对象

是window的另一个属性，在编程中很少用的JS对象。保存浏览器窗口外面的客户端显示器的信息，如像素宽度和像素高度。

history对象

表示当前窗口首次使用以来用户的导航历史记录。因为history是window的属性，所以每个window都有自己的history对象。

JavaScript语言基础（12）BOM浏览器对象模型