一、window 对象
BOM 的核心对象是window,它表示浏览器的一个实例。
浏览器对象模型(BOM)以window 对象为依托,表示浏览器窗口以及页面可见区域。同时,window对象还是ECMAScript 中的Global 对象,因而所有全局变量和函数都是它的属性,且所有原生的构造函数及其他函数也都存在于它的命名空间下。
1.1 全局作用域
由于window 对象同时扮演着ECMAScript 中Global 对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window 对象的属性和方法。
如:
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
由于
sayAge()
存在于全局作用域中,因此this.age
被映射到window.age
,最终显示的仍然是正确的结果。
全局变量不能通过delete 操作符删除,而直接在window 对象上的定义的属性可以。
另外,还要记住一件事:尝试访问未声明的变量会抛出错误,但是通过查询window 对象,可以知道某个可能未声明的变量是否存在。
1.2 窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window 对象,并且保存在frames 集合中。
如:
<head>
<title>Frameset Example</title>
</head>
<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
<frameset cols="50%,50%">
<frame src="anotherframe.htm" name="leftFrame">
<frame src="yetanotherframe.htm" name="rightFrame">
</frameset>
</frameset>
</html>
以上代码创建了一个框架集,其中一个框架居上,两个框架居下。对这个例子而言,可以通过window.frames[0]
或window.frames["topFrame"]
来引用上方的框架。不过,恐怕你最好使用top
而非window 来引用这些框架(例如,通过top.frames[0]
)。
与top 相对的另一个window 对象是
parent
。顾名思义,parent(父)对象始终指向当前框架的直接上层框架。
注意,除非最高层窗口是通过
window.open()
打开的,否则其window 对象的name
属性不会包含任何值。
1.3 窗口位置
用来确定和修改window 对象位置的属性和方法有很多。IE、Safari、Opera 和Chrome 都提供了screenLeft
和screenTop
属性,分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX
和screenY
属性中提供相同的窗口位置信息,Safari 和Chrome 也同时支持这两个属性。
无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。然而,使用moveTo()
和moveBy()
方法倒是有可能将窗口精确地移动到一个新位置。
这两个方法都接收两个参数
1.moveTo()
接收的是新位置的x 和y 坐标值;
2.moveBy()
接收的是在水平和垂直方向上移动的像素数。
如:
window.moveTo(0,0);
//将窗向下移动100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动50 像素
window.moveBy(-50,0);
1.4 窗口大小
跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了4 个属性:innerWidth
、innerHeight
、outerWidth
和outerHeight
。
在IE、Firefox、Safari、Opera 和Chrome 中,document.documentElement.clientWidth
和document.documentElement.clientHeight
中保存了页面视口的信息。
对于移动设备,window.innerWidth
和window.innerHeight
保存着可见视口,也就是屏幕上可见页面区域的大小。移动IE 浏览器不支持这些属性,但通过document.documentElement.client- Width
和document.documentElement.clientHeihgt
提供了相同的信息。随着页面的缩放,这些值也会相应变化。
另外,使用resizeTo()
和resizeBy()
方法可以调整浏览器窗口的大小。
1.resizeTo()
接收浏览器窗口的新宽度和新高度;
2.resizeBy()
接收新窗口与原窗口的宽度和高度之差
如:
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
需要注意的是,这两个方法与移动窗口位置的方法类似,也有可能被浏览器禁用;而且,在Opera和IE7(及更高版本)中默认就是禁用的。另外,这两个方法同样不适用于框架,而只能对最外层的window 对象使用。
1.5 导航和打开窗口
使用window.open()
方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法可以接收4 个参数:要加载的URL
、窗口目标
、一个特性字符串
以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
。通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。
如果为window.open()
传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
此外,第二个参数也可以是下列任何一个特殊的窗口名称:_self
、_parent
、_top
或_blank
。
1.5.1 弹出窗口
如果给window.open()
传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。
在不打开新窗口的情况下,会忽略第三个参数。第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性。下表列出了可以出现在这个字符串中的设置选项。
设 置 | 值 | 说 明 |
---|---|---|
fullscreen | yes或no | 表示浏览器窗口是否最大化。仅限IE |
height | 数值 | 表示新窗口的高度。不能小于100 |
left | 数值 | 表示新窗口的左坐标。不能是负值 |
location | yes或no | 表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no,地址栏可能会隐藏,也可能会被禁用(取决于浏览器) |
menubar | yes或no | 表示是否在浏览器窗口中显示菜单栏。默认值为no |
resizable | yes或no | 表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no |
scrollbars | yes或no | 表示如果内容在视口中显示不下,是否允许滚动。默认值为no |
status | yes或no | 表示是否在浏览器窗口中显示状态栏。默认值为no |
toolbar | yes或no | 表示是否在浏览器窗口中显示工具栏。默认值为no |
top | 数值 | 表示新窗口的上坐标。不能是负值 |
width | 数值 | 表示新窗口的宽度。不能小于100 |
表中所列的部分或全部设置选项,都可以通过逗号分隔的名值对列表来指定。其中,名值对以等号表示(注意,整个特性字符串中不允许出现空格),