2020/6/10 JavaScript高级程序设计 BOM

BOM（浏览器对象模型）：提供用于访问浏览器的对象。

8.1 window对象

window是BOM的核心对象，表示浏览器的一个实例。

• JavaScript访问浏览器窗口的接口
• ECMAScript规定的Global对象

8.1.1 全局作用域

全局变量会成为window的属性，但是定义全局变量和直接在window对象上定义属性是有差别的——全局变量不能通过delete删除，但window对象上定义的可以。

这是因为使用var添加的window属性[[Configurable]]被设置为false（不可删除）。

访问未声明的变量会发生错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在。

//这里会抛出错误，因为oldValue未定义
var newValue = oldValue;

//这里不会抛出错误，因为这是一次属性查询
var newValue = window.oldValue;  //newValue的值是undefined

8.1.2 窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的window对象，并保存在frames集合中。在frames集合中可以通过数值索引/框架名称来访问相应的window对象。每个window对象都有一个name属性，其中包含框架的名称。

PS1：对于最高层窗口来说：除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值。

与框架有关的window对象属性（同时也是对象）：

• top：始终指向最高（最外）层的框架，也就是浏览器窗口。使用它可以正确地在一个框架中访问另一个框架。因为对任意一个框架中的代码来说，window对象指向的都是那个框架的特定实例，而非最高层框架。
• parent：始终指向当前框架的直接上层框架。在没有框架的情况下，parent等于top。
• self：始终指向window。引入self的目的仅仅是为了和top和parent对象对应，因此他不包含其他值。

8.1.3 窗口位置

用来确定window对象位置的属性：screenLeft, screenTop / screenX, screenY，分别表示窗口相对于屏幕左边和上边的位置。

两组方法分别支持的浏览器：

screenLeft, screenTop	IE、Safari、Opera、Chrome
screenX, screenY	Firefox、Safari、Chrome

跨浏览器取得窗口位置的代码：

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

缺点：

• screenTop表示的是由从屏幕上边到window对象表示的页面可见区域的距离（即页面可见区域上方浏览器工具栏的像素高度）。
• screenY表示整个浏览器窗口相对于屏幕的坐标值（0）。

将窗口精确移动到一个新位置的方法：

• moveTo()：接收最新位置的x，y坐标值。
• moveBy()：接收在水平和垂直方向上移动的像素数。

PS：这两个方法很可能会被浏览器禁用（Opera和IE7+），且不适合框架，只能对最外层window对象使用。

8.1.4 窗口大小

	IE9+、Safari、Firefox	Opera	Chrome
innerWidth、innerHeight	视图区大小	该容器中页面视图区的大小（减去边框宽度）	视口大小
outerWidth、outerHeight	浏览器窗口本身的尺寸	页面视图容器的大小（单个标签页对应浏览器窗口的大小）	视口大小

document.documentElement.clientWidth / document.documentElement.clientHeight：保存了页面视口的信息。

resizeTo()和resizeBy()：调整浏览器窗口的大小。（分别接收新宽度高度和新窗口与原窗口的宽度和高度之差，同样可能被浏览器禁用）

8.1.5 导航和打开窗口