每日三问之javascript—BOM浏览器对象模型

window 对象

BOM 的核心对象是 window ，它表示浏览器的一个实例。

全局作用域

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

var age = 29; 
function sayAge(){ 
 alert(this.age); 
} 
alert(window.age); //29 
sayAge(); //29 
window.sayAge(); //29

由于 sayAge() 存在于全局作用域中，因此 this.age 被映射到 window.age。

还要记住一件事：尝试访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。

//这里会抛出错误，因为 oldValue 未定义
var newValue = oldValue; 
//这里不会抛出错误，因为这是一次属性查询
//newValue 的值是 undefined 
var newValue = window.oldValue;

窗口位置

IE 、 Safari 、 Opera 和 Chrome 都提供了screenLeft 和 screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。

Firefox 则在

screenX 和 screenY 属性中提供相同的窗口位置信息， Safari 和 Chrome 也同时支持这两个属性。

Opera虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应，因此建议大家不要在 Opera 中使用它们。

var leftPos = (typeof window.screenLeft == "number") ? 
 window.screenLeft : window.screenX; 
var topPos = (typeof window.screenTop == "number") ? 
 window.screenTop : window.screenY;

使用 moveTo()和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo() 接收的是新位置的 x 和 y 坐标值，而 moveBy() 接收的是在水平和垂直方向上移动的像素数。

• //将窗口移动到屏幕左上角
  window.moveTo(0,0); 
  //将窗向下移动 100 像素
  window.moveBy(0,100); 
  //将窗口移动到(200,300) 
  window.moveTo(200,300); 
  //将窗口向左移动 50 像素
  window.moveBy(-50,0);

窗口大小

IE9+ 、 Firefox 、 Safari 、 Opera 和 Chrome 均为此提供了 4 个属性： innerWidth 、 innerHeight 、 outerWidth 和 outerHeight 。

• 在 IE9+、Safari 和 Firefox中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸。
• 在 Opera 中，这两个属性的值表示页面视图容器 的大小。而 innerWidth 和 innerHeight
  则表示该容器中页面视图区的大小（减去边框宽度）。
• 在 Chrome 中， outerWidth 、 outerHeight 与innerWidth、 innerHeight 返回相同的值，即视口（ viewport ）大小而非浏览器窗口大小。

IE 、 Firefox 、 Safari 、 Opera 和 Chrome 中， document.documentElement.clientWidth 和

document.documentElement.clientHeight 中保存了页面视口的信息。

• 在 IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息。
• 而对于混杂模式下的 Chrome ，则无论通过 document.documentEle
  ment 还是 document.body 中的 clientWidth 和 clientHeight 属性，都可以取得视口的大小。

var pageWidth = window.innerWidth, 
 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; 
 } 
}

通过检查 document.compatMode（这个属性将在第 10 章全面讨论）来确定页面是否处于标准模式。

 使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小。

这两个方法都接收两个参数，其中 resizeTo() 接收浏览器窗口的新宽度和新高度，而 resizeBy() 接收新窗口与原窗口的宽度和高度之差。

//调整到 100×100 
window.resizeTo(100, 100); 
//调整到 200×150 
window.resizeBy(100, 50); 
//调整到 300×300 
window.resizeTo(300, 300);

导航和打开窗口

使用 window.open() 方法既可以导航到一个特定的 URL ，也可以打开一个新的浏览器窗口。

//等同于< a href="http://www.wrox.com" target="topFrame"></a> 
window.open("http://www.wrox.com/", "topFrame");

方法可以接收 4 个参数：要加载的 URL 、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

第二个参数也可以是下列任何一个特殊的窗口名称：_self 、 _parent 、 _top 或 _blank 。

 示例：这行代码会打开一个新的可以调整大小的窗口，窗口初始大小为 400×400 像素，并且距屏幕上沿和左边各 10 像素。

window.open("http://www.wrox.com/","wroxWindow", 
 "height=400,width=400,top=10,left=10,resizable=yes");

// 打开新窗口
var wroxWin = window.open("http://www.wrox.com/","wroxWindow", 
 "height=400,width=400,top=10,left=10,resizable=yes");

// 调整大小
wroxWin.resizeTo(500,500);

// 移动位置
wroxWin.moveTo(100,100);

// 关闭新窗口
wroxWin.close();

 弹出窗口屏蔽程序

 间歇调用和超时调用

超时调用需要使用 window 对象的 setTimeout() 方法

//设置超时调用
var timeoutId = setTimeout(function() { 
 alert("Hello world!"); 
}, 1000); 
//注意：把它取消
clearTimeout(timeoutId);

设置间歇调用的方法是 setInterval()

var num = 0; 
var max = 10; 
var intervalId = null; 
function incrementNumber() { 
 num++; 
 //如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
 if (num == max) { 
 clearInterval(intervalId); 
 alert("Done"); 
 } 
} 
intervalId = setInterval(incrementNumber, 500);

location 对象 

 查询字符串参数

其中访问 URL 包含的查询字符串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的所有内容，但却没有办法逐个访问其中的每个查询字符串参数。

function getQueryStringArgs(){ 
 //取得查询字符串并去掉开头的问号
 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), 
 
 //保存数据的对象
 args = {}, 
 
 //取得每一项
 items = qs.length ? qs.split("&") : [], 
 item = null, 
 name = null,
 value = null, 
 //在 for 循环中使用
 i = 0, 
 len = items.length; 
 //逐个将每一项添加到 args 对象中
 for (i=0; i < len; i++){ 
 item = items[i].split("="); 
 name = decodeURIComponent(item[0]); 
 value = decodeURIComponent(item[1]); 
 if (name.length) { 
 args[name] = value; 
 } 
 } 
 
 return args; 
}

这个函数的第一步是先去掉查询字符串开头的问号。当然，前提是 location.search 中必须要包含一或多个字符。然后，所有参数将被保存在 args 对象中，该对象以字面量形式创建。接下来，根据和号（& ）来分割查询字符串，并返回 name=value 格式的字符串数组。下面的 for 循环会迭代

这个数组，然后再根据等于号分割每一项，从而返回第一项为参数名，第二项为参数值的数组。再使用 decodeURIComponent() 分别解码 name 和 value （因为查询字符串应该是被编码过的）。最后，将 name 作为 args 对象的属性，将 value 作为相应属性的值。

//假设查询字符串是?q=javascript&num=10 
var args = getQueryStringArgs(); 
alert(args["q"]); //"javascript" 
alert(args["num"]); //"10"

位置操作

位置有关的一个方法是 reload()，作用是重新加载当前显示的页面。

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

history 对象

使用 go() 方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。

//后退一页
history.go(-1); 
//前进一页
history.go(1); 
//前进两页
history.go(2);

//跳转到最近的 wrox.com 页面
history.go("wrox.com"); 
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");

//后退一页
history.back(); 
//前进一页
history.forward();