浅谈window对象

在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。

“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

var a = 1;
window.a // 1

上面代码中，变量a是一个全局变量，但是实质上它是window对象的属性。声明一个全局变量，就是为window对象的同名属性赋值。

从语言设计的角度看，所有变量都是window对象的属性，其实不是很合理。因为window对象有自己的实体含义，不适合当作最高一层的顶层对象。这个设计失误与JavaScript语言匆忙的设计过程有关，最早的设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者Brendan Eich就把window对象当作顶层对象，所有未声明就赋值的变量都自动变成window对象的属性。这种设计使得编译阶段无法检测出未声明变量，但到了今天已经没有办法纠正了。

window对象的属性

(1)window对象的 window属性指向自身。

window.window === this // true

(2)window.name属性用于设置当前浏览器窗口的名字。

window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

各个浏览器对这个值的储存容量有所不同，但是一般来说，可以高达几MB。

该属性只能保存字符串，且当浏览器窗口关闭后，所保存的值就会消失。因此局限性比较大，但是与<iframe>窗口通信时，非常有用。

(3)window.location返回一个location对象，用于获取窗口当前的URL信息。它等同于document.location对象。

window.location === document.location // true

(4) window.closed属性返回一个布尔值，表示窗口是否关闭。

window.closed // false

上面代码检查当前窗口是否关闭。这种检查意义不大，因为只要能运行代码，当前窗口肯定没有关闭。这个属性一般用来检查，使用脚本打开的新窗口是否关闭。

var popup = window.open();

if ((popup !== null) && !popup.closed) {
  // 窗口仍然打开着
}

(5)window.opener属性返回打开当前窗口的父窗口。如果当前窗口没有父窗口，则返回 null。

window.open().opener === window // true

上面表达式会打开一个新窗口，然后返回 true。

通过opener属性，可以获得父窗口的的全局变量和方法，比如window.opener.propertyName和window.opener.functionName()。

(6)window.frames属性返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。window.frames[0]表示页面中第一个框架窗口。

如果iframe元素设置了id或name属性，那么就可以用属性值，引用这个iframe窗口。比如<iframe name="myIFrame">就可以用frames['myIFrame']或者frames.myIFrame来引用。

frames属性实际上是window对象的别名。

frames === window // true

因此，frames[0]也可以用window[0]表示。但是，从语义上看，frames更清晰，而且考虑到window还是全局对象，因此推荐表示多窗口时，总是使用frames[0]的写法。更多介绍请看下文的《多窗口操作》部分。

(7)window.length属性返回当前网页包含的框架总数。如果当前网页不包含frame和iframe元素，那么window.length就返回0。

window.frames.length === window.length // true

window.frames.length与 window.length应该是相等的。

(8)window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离和垂直距离，单位为像素。

(9)window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport），单位为像素。

当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。因为这时网页的像素大小不变（比如宽度还是960像素），只是每个像素占据的屏幕空间变大了，因为可见部分（视口）就变小了。

注意，这两个属性值包括滚动条的高度和宽度。

(10)window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框，单位为像素。

(11)window.pageXOffset属性返回页面的水平滚动距离，window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。

举例来说，如果用户向下拉动了垂直滚动条75像素，那么window.pageYOffset就是75。用户水平向右拉动水平滚动条200像素，window.pageXOffset就是200。

我的个人博客地址：http://xiuchundu.github.io/，欢迎交流 。