JavaScript-BOM（浏览器对象模型）

1. window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

1.1 全局作用域

在全局作用域中声明的变量、函数都会变成window对象的属性和方法。但是全局变量不能通过delete操作费删除，而直接在window对象上定义的属性可以。尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

window Mobil平台的IE浏览器不允许通过window.property=value之类的形式，直接在window对象上创建新的属性和方法。可是，在全局作用域中声明的所有变量和函数，照样会变成window对象的成员。

1.2 窗口关系及框架

如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右、从上到下）或者框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。

top对象始终指向最高（最外）层的框架，也就是浏览器窗口。top相对的另一个window对象是parent。顾名思义，parent对象始终指向当前框架的直接上层框架。在某些情况下，parent有可能等于top；但在没有框架的情况下，parent一定等于top，此时它们都等于window。与框架有关的最后一个对象self，它始终指向window；self和window对象可以互换使用。

1.3 窗口位置

使用如下代码可以跨浏览器取得窗口左边和上边的位置：

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos =(typeof window.screenTop == "number") ? window.screenTop : window.screenY;

无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而，使用moveTo()和moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的x和y坐标值，而moveBy()接收的是在水平和垂直方向上移动的像素数。注意，这两个方法可能会被浏览器禁用；而且，在opera和IE7及更高版本中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window对象使用。

1.4 窗口大小

无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示：

var pageWidth = window.innerWidth, pageHeight = window.innerHeight;

if (typeof pageWidth != "number"){

if (document.compatMode == "CSS1Compat") {

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

}

else {

pageWidth = document.body.clientWidth;

pageHeight = document.body.clientHeight;

}

}

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收窗口与原窗口的宽度和高度之差。注意，这两个方法可能会被浏览器禁用；而且，在opera和IE7及更高版本中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window对象使用。

1.5 导航和打开窗口

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法可以接收4个参数：要加载的url、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。在不打开新窗口的情况下，会忽略第三个参数。最后一个参数只在不打开新窗口的情况下使用。

window.open()方法会返回一个指向新窗口的引用。引用的对象与其他window对象大致相似，但我们可以对其进行更多控制。调用close()方法还可以关闭新打开的窗口，但是，这个方法仅适用于通过window.open()打开的弹出窗口。

新创建的window对象有一个opener属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层window对象（top）中有定义，而且指向调用window.open()的窗口或框架。将opener属性设置为null就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。标签页之间的联系一旦切断，将没有办法恢复。

1.6 间歇调用和超时调用

超时调用需要使用window对象的setTimeout()方法，它接收两个参数：要执行的代码（字符串或代码）和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。调用setTimeout()之后，该方法会返回一个数值ID，表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以将它作为参数调用clearTimeout()方法来取消尚未执行的超时调用计划。

注：第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定执行。JavaScript是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

间歇调用会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被卸载。设置间歇调用的方法是setInterval()，它接收两个参数：要执行的代码（字符串或代码）和每次执行之前需要等待的毫秒数。调用setInterval()方法同样会返回一个间歇调用ID，该ID可用于在将来的某个时刻取消间歇调用。使用clearInterval()方法并传入相应的间歇调用ID就可以取消尚未执行的间歇调用。

一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

1.7 系统会话框

浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示消息。

2. location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的消息，还提供了一些导航功能。location既是window对象的属性，也是document对象的属性。location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

修改location对象的属性可以改变当前加载的页面，每次修改location的属性（hash除外），页面都会以新URL重新加载。当通过任何一种方式修改URL之后，浏览器的历史记录中就会生成一条新纪录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。这个方法只接受一个参数，即要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新纪录。在调用replace()方法之后，用户不能回到前一个页面。

与位置有关的最后一个方法是reload()，作用是重新加载当前显示的页面。如果调用reload()时不传参数，页面就会以最有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器加载，则需要向该方法传递参数true。位于reload()调用之后的代码有可能会也有可能不会执行，这要取决于网络延迟或系统资源等因素。为此，最后将reload()放在代码的最后一行。

3. navigator对象

navigator对象，现在已经成为识别客户端浏览器的事实标准。每个浏览器中的navigator对象都有一套自己的属性，这些属性通常用于检测显示网页的浏览器类型。主要有两个用途：检测插件和注册处理程序。

4. screen对象

screen对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。每个浏览器中的screen对象都包含着各不相同的属性。这些信息经常集中出现在测定客户端能力的站点跟踪工具中，但通常不会用于影响功能。

5. history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。另外，还可以使用两个简写方法back()和forward()来代替go()，分别模仿浏览器的“后退”和“前进”按钮。history对象还有一个length属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架的第一个页面而言，history.length等于0。