1. BOM
1.1 window
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重身份，
1.1.1 全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
1.1.2 窗口关系及框架
如果页面中包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中。在frames集合中，可以通过数值索引（从0开始，从左至右，从上到下）或者框架的名称来访问相应的window对象。
top对象始终指向最高（最外）层的框架，也就是浏览器窗口
parent对象始终指向当前框架的直接上层对象
self对象始终指向window对象
1.1.3 窗口位置
用来确定和修改window对象的属性和方法有很多，
IE，Safari，Opera和Chrome提供了screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置
Firefox则提供screenX和screenY提供相同的窗口位置信息
1.1.4 窗口大小
跨浏览器确定窗口大小不是一件容易的事，虽然无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小
|
var pageWidth = window.innerWidth; var pageHeight = window.innerHeight;
if(typeof pageWidth ! = "number"){ if(document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else{ pageWidth = document.body.clientWidth; pageHeight =document.body.clientHeight; } } |
1.1.5 导航和打开窗口
使用window.open()既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
这个方法接受四个参数：要加载的URL，窗口目标，一个特定的字符串以及一个新页面是否取代浏览器历史记录中当前加载页面的布尔值。
1.1.6 间歇调用和超时调用
|
var timeoutid = setTimeout(function() { alert('hi'); }, 1000); //一秒后调用
clearTimeout(timeoutid); //取消
var intervalid = setInterval(function(){ alert('ho'); },1000); //一秒钟调用1次
clearInterval(intervalid);//取消 |
1.2 location
location是最有用的BOM对象之一，它既是window对象的属性也是document对象的属性。
|
属性名 |
例子 |
说明 |
|
hash |
#contents |
返回URL中的hash(#后跟0或多个字符)，如果URL中不包含散列，则返回空字符串 |
|
host |
www.wrox.com:80 |
返回服务器名称和端口号（如果有） |
|
hostname |
www.wrox.com |
返回不带端口号的服务器名称 |
|
href |
http:/www.wrox.com |
返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值 |
|
pathname |
/wiley/ |
返回URL中的目录和（或）文件名 |
|
port |
8080 |
返回URL中指定的端口号。如果URL中不存在端口号，则这个属性返回空字符串 |
|
protocol |
http: |
返回页面使用的协议。通常是http:或者https： |
|
search |
?q=javascript |
返回URL地址中的查询字符串。这个字符串以问号开头 |
1.3 navigator
主要用来识别客户端浏览器的事实标准
1.4 screen
screen对象基本上只能用来表明客户端的能力，其中包括浏览器窗口外部的显示器信息等。
1.5 history
history对象是window对象的属性，保存着用户上网的历史记录。history存在go,back，forward三个方法用来浏览历史记录。
|
//后退一页 history.go(-1);
//前进一页 history.go(1);
//前进2页 history.go(2);
//跳转到历史记录的 baidu.com网站 history.go("baidu.com");
//后退一页 history.back(); //前进一页 history.forward(); |
history对象还有一个length属性，保存在历史记录的数量。这个数量包括所有历史记录，即所有向前和向后的记录。