【学习笔记】八：浏览器对象模型BOM

1.window对象

　　window是BOM的核心，它既是JS访问浏览器的一个接口，又是ES规定的Global对象。

　　1）全局作用域对象

　　　　a.所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法。

　　　　b.定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除（使用var语句添加的window属性[[Configurable]]特性为false），而直接在window对象上定义的属性可以。

　　　　c.尝试访问未声明的变量会抛出错误，但是通过查询window 对象，可以知道某个未声明的变量是否存在。

　　2）窗口关系及框架

　　　　如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中。其中top对象指向最外层框架即浏览器窗口，parent对象指向当前框架的直接上层框架，self对象等于window对象。

　　　　由于不同框架中的window对象都有自己的一套构造函数，一一对应，但并不相同，这个问题会影响到对跨框架传递的对象使用instanceof操作符。

　　3）窗口位置

　　　　window对象中确定和修改位置的属性和方法有很多，但是各个浏览器有很大区别。

　　　　screenLeft、screenTop：IE、Safari、Opera、Chrome

　　　　screenX、screenY：FireFox、Safari、Chrome（Opera也支持这两个属性，但是和在其他浏览器中的意义并不相同）

　　　　同时，screenLeft、screenTop在IE、Opera中指屏幕相应边缘到浏览器窗口可见区域的位置，而在Chrome、Firefox、Safari中，screenY或screenTop指相对于浏览器窗口的位置。top.screenX、topscreenY也存在不一致问题，在Chrome、Firefox、Safari中无论框架是否设置外边距始终都会返回相同的值，忽略这个外边距，而在IE和Opera中会返回框架相对于屏幕边缘的精确值。

　　　　moveTo()、moveBy()，这两个方法在每个浏览器中倒是没有差别，但是在浏览器中这两个方法可能会被禁用，且这两个方法只能对最外层window对象使用。

　　4）窗口大小

　　　　innerWidth、innerHeight、outerWidth、outerHeight，但是这些属性在不同的浏览器中有一些差别。

　　　　resizeTo()、resizeBy()可以调整浏览器窗口的大小，但是同样，这两个方法可能在浏览器中被禁用，且这两个方法只能对最外层window对象使用。

　　5）导航和窗口打开

　　　　window.open();四个参数：要加载的URL、目标窗口、特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值（只在不打开新窗口的情况下使用）

　　　　a.window.open()返回一个指向新打开窗口的对象引用、同时这个引用还有一个opener属性值，指向打开它的原始窗口。

　　　　b.安全限制：为了安全考虑，限制一些恶意的广告弹窗，不同的浏览器对open()函数的第三个特性字符串控制的特性做了限制。

　　　　c.弹窗屏蔽检测：浏览器内置的屏蔽程序阻止的弹出框，window.open（）返回null，浏览器扩展或者其他程序阻止的，通常会抛出错误。通过检测这个返回值，判断屏蔽情况。

　　6）间歇调用和超时调用

　　　　setTimeout（）：超时调用，经过设定的时间后，把当前任务添加到任务队列中。（因为js是单线程的，所以经过指定时间后指定的代码不一定执行，只是把它放到任务队列中）。clearTimeout（）

　　　　setInterval（）：间歇调用。clearInterval（）

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

　　7）系统对话框

　　　　alert(（）、confirm（）、prompt（）：同步的，会阻止后续代码的执行

　　　　find（）、print（）：异步的，不会阻止后续代码的执行

2.location对象

　　它提供了与当前窗口中加载的文档相关的信息，还提供了一些导航功能。window.location = document.location,同时它还具有一系列属性，保存着URL中的一些信息。

　　location.href、window.location、location.assign()作用相同，都是在当前页面中打开设置的URL对应的页面，且会在浏览器历史记录中插入一条记录，一般我们常使用location.href

　　可以通过设置location的hash、search、hostname、pathname、port属性来改变URL，这种方式也会使浏览器以新URL重新加载，且会在浏览器历史记录中插入一条记录。

　　location.replace()方式会使浏览器加载新URL，但不会在浏览器历史记录中生成新纪录，而是替换掉浏览器历史记录中当前显示的页面。

　　location.reload(),以最有效的方式重新加载页面（可能从缓存中加载）、location.reload(true)从服务器重新加载

3.navigator对象——保存客户端浏览器的相关信息

　　1）插件检测：IE和非IE对应不同的方法

　　2）注册处理程序：registerContentHandler()和registerProtocolHandler()方法让一个站点指明它可以处理特定类型的信息。

4.screen对象——记录了客户端屏幕的相关信息，一般用处不大，多用于站点分析。

5.history对象——保存着用户的上网历史记录，出于安全考虑，无法得知用户访问过得URL，但是可以利用相应方法实现针对某一历史记录的相应跳转和获取历史记录的数量。

　　history.go()、history.back()、history.forward（）、history.length