在浏览器中,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/,欢迎交流 。