BOM

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 都提供了 screenLeftscreenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置


窗口大小

多个属性:

innerWidthinnerHeight 表示当前视窗(viewport)的宽度和高度


outerWidthouterHeight返回浏览器窗口本身的尺寸(无论是从最外层的 window 对象还是从 某个框架访问)


clientWidthclientHeight :width+左右padding、height + 上下padding

clientTop:boder.top(上边框的宽度)


offsetWidthoffsetHeight:width + 左右padding + 左右boder、height + 上下padding +上下boder

offsetTop 当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离



scrollWidthscrollHeight: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){ 
 //这应该是用户打开窗口后的第一个页面
}