window 对象
BOM 的核心对象是 window,
在浏览器中,window 对象有双重角色, 它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。
全局作用域
window 对象同时扮演着 ECMAScript 中 Global 对象的角色,因此所有在全局作用域中声明 的变量、函数都会变成 window 对象的属性和方法。
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
由于sayAge()
存在于全局作用域中,因此 this.age 被映射到 window.age
定义全局变量与在 window 对象上直接定义属性还 是有一点差别
全局变量不能通过 delete 操作符删除,而直接在 window 对象上的定义的属性可以
var age = 29;
window.color = "red";
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误,在其他所有浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined
因为刚才使用 var 语句添加的 window 属性有一个名为[[Configurable]]的特性,这个特性的值被 设置为false,因此这样定义的属性不可以通过delete操作符删除。
尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知 道某个可能未声明的变量是否存在
//这里会抛出错误,因为 oldValue 未定义
var newValue = oldValue;
//这里不会抛出错误,因为这是一次属性查询
//newValue 的值是 undefined
var newValue = window.oldValue;
窗口关系及框架
每个框架都拥有自己的 window 对象,并且保存在 frames 集合中
<html>
<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 对象位置,IE、Safari、Opera 和 Chrome 都提供了 screenLeft
和 screenTop
属性,分别用于表示窗口相对于屏幕左边和上边的位置
窗口大小
多个属性:
innerWidth
、innerHeight
表示当前视窗(viewport)的宽度和高度
outerWidth
、outerHeight
返回浏览器窗口本身的尺寸(无论是从最外层的 window 对象还是从 某个框架访问)
clientWidth
、clientHeight
:width+左右padding、height + 上下padding
clientTop
:boder.top(上边框的宽度)
offsetWidth
、offsetHeight
:width + 左右padding + 左右boder、height + 上下padding +上下boder
offsetTop
当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离
scrollWidth
、scrollHeight
:width
scrollTop
::内容层顶部 到 可视区域顶部的距离 (用的最多)
resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小
resizeTo()接收浏览器窗口的新宽度和新高度
resizeBy()接收新窗口与原窗口的宽 度和高度之差
//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
导航和打开窗口
window.open()
接收 4 个参数:要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览 器历史记录中当前加载页面的布尔值。
如果第二个参数是已有窗口或框架的名称,那么就会在具 有该名称的窗口或框架中加载第一个参数指定的 URL。
//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");
弹出窗口
如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架,那么该方法就会根 据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。
调用 close()方法还可以关闭新打开的窗口
wroxWin.close()
、Window.close()
location对象
它提供了与当前窗口中加载的文档有关的信息,还提供了一 些导航功能
下表列出了 location 对象的所有属性
位置操作
使用 location 对象可以通过很多方式来改变浏览器的位置。
使用 assign()方法并为其传递一个 URL
location.assign("http://www.wrox.com");
可以立即打开新 URL 并在浏览器的历史记录中生成一条记录
下列两行代码与 显式调用 assign()方法的效果完全一样。
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
replace()
方法不会在浏览器上留痕,不会在历史记录中生成新记 录
location.replace("http://www.wrox.com/");
reload()
默认先从缓存找
作用是重新加载当前显示的页面,如果要强制从服务器重新加载传参location.reload(true)
history 对象
history 对象保存着用户上网的历史记录
使用 go()
方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
还可以使用两个简写方法 back()
和 forward()
来代替 go()
这个方法接受一个参数, 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转,正数反之
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的 wrox.com 页面
//如果历史记录中不包含该字符串,那么这个方法什么也不做
history.go("wrox.com");
//后退一页
history.back();
//前进一页
history.forward();
history 对象还有一个 length 属性,保存着历史记录的数量
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}