BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色，它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global （全局）对象。
本节目录
- 一、window 对象
- 1.1 全局作用域
- 1.2 窗口大小和位置
- 1.3 window.open() 方法
- 1.3.1 window.open() 方法的第二个参数 ---- 设置窗口
- 1.3.2 window.open() 方法的第三个参数 ---- 设置窗口
- 1.3.3 window.open() 方法返回值调整窗口
- 1.3.4 浏览器内置弹出窗口屏蔽程序
- 1.4 间歇调用和超时调用
- 1.5 系统对话框 ---- alert()、confirm() 和 prompt() 方法
- 二、location 对象
- 三、history 对象
- 四、navigator 对象和 screen 对象
一、window 对象
1.1 全局作用域
由于 window 对象同时扮演着 ECMAScript 中 Global 对象的角色，因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。
var age = 29;
function sayAge(){
alert(this.age);
}
alert(window.age); //29
sayAge(); //29
window.sayAge(); //29
1.2 窗口大小和位置
1.2.1 窗口位置 ---- moveTo() 和 moveBy() 方法
IE、Safari、Opera 和 Chrome 都提供了 screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在 screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 同时支持这两个属性。
使用下列代码可以跨浏览器取得窗口左边和上边的位置：
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
这个例子运用二元操作符首先确定 screenLeft 和 screenTop 属性是否存在，如果是（在 IE、Safari、Opera 和 Chrome 中），则取得这两个属性的值。如果不存在（在 Firefox 中），则取得 screenX和 screenY 的值。
//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗向下移动 100 像素
window.moveBy(0,100);
//将窗口移动到(200,300)
window.moveTo(200,300);
//将窗口向左移动 50 像素
window.moveBy(-50,0);
需要注意的是，moveTo() 和 moveBy() 这两个方法可能会被浏览器禁用；而且，在 Opera 和 IE 7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的 window 对象使用。
1.2.2 窗口大小 ---- resizeTo()和 resizeBy()方法
在 IE9+、Safari 和 Firefox中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸。在 Opera中，这两个属性的值表示页面视图容器的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。
在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息。在 IE6 中，这些属性必须在标准模式下才有效；如果是混杂模式，就必须通过 document.body.clientWidth 和 document.body.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;
}
}
在以上代码中，我们首先将 window.innerWidth 和 window.innerHeight 的值分别赋给了 pageWidth 和 pageHeight。然后检查 pageWidth 中保存的是不是一个数值；如果不是，则通过检查 document.compatMode 来确定页面是否处于标准模式。
如果是，则分别使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 的值。否则，就使用 document.body.clientWidth 和 document.body.clientHeight 的值。
//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);
1.3 window.open() 方法
使用 window.open() 方法既可以导航到一个特定的 URL，也可以打开一个新的浏览器窗口。
这个方法可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
1.3.1 window.open() 方法的第二个参数 ---- 设置窗口
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称
1.3.2 window.open() 方法的第三个参数 ---- 设置窗口
如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏、地址栏和状态栏等）的新浏览器窗口（或者打开一个新标签页——根据浏览器设置）。
在不打开新窗口的情况下，会忽略第三个参数。
window.open("http://www.wrox.com/","_blank",
"height=400,width=400,top=10,left=10,resizable=yes");
//打开一个新的可以调整大小的窗口
//窗口初始大小为 400×400 像素
//并且距屏幕上沿和左边各 10 像素
1.3.3 window.open() 方法返回值调整窗口
有些浏览器在默认情况下可能不允许我们针对主浏览器窗口调整大小或移动位置，但却允许我们针对通过 window.open()创建的窗口调整大小或移动位置。通过这个返回的对象，可以像操作其他窗口一样操作新打开的窗口：
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);
1.3.4 浏览器内置弹出窗口屏蔽程序
大多数浏览器都内置有弹出窗口屏蔽程序，结果就是用户可以将绝大多数不想看到弹出窗口屏蔽掉。于是，在弹出窗口被屏蔽时，就应该考虑两种可能性。
如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么 window.open()很可能会返回 null。此时，只要检测这个返回的值就可以确定弹出窗口是否被屏蔽
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
alert("The popup was blocked!");
}
如果是浏览器扩展或其他程序阻止的弹出窗口，那么 window.open()通常会抛出一个错误。因此，要想准确地检测出弹出窗口是否被屏蔽，必须在检测返回值的同时，将对 window.open()的调用封装在一个 try-catch 块中，如下所示。
var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
alert("The popup was blocked!");
}
1.4 间歇调用和超时调用
1.4.1 间歇调用 ---- setTimeout() 方法
setTimeout()方法接受两个参数：要执行的代码和等待毫秒数。
其中，第一个参数可以是一个包含 JavaScript 代码的字符串，也可以是一个函数。由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。
//不建议传递字符串！
setTimeout("alert('Hello world!') ", 1000);
//推荐的调用方式
setTimeout(function() {
alert("Hello world!");
}, 1000);
调用 setTimeout()之后，该方法会返回一个数值 ID，表示超时调用。这个超时调用 ID 是计划执行代码的唯一标识符，可以通过它来取消尚未执行的超时调用。
//设置超时调用
var timeoutId = setTimeout(function() {
alert("Hello world!");
}, 1000);
//注意：把它取消
clearTimeout(timeoutId);
1.4.2 间歇调用 ---- setInterval() 方法
间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或者页面被关闭。
设置间歇调用的方法是 setInterval()，它接受的参数与 setTimeout()相同：要执行的代码（字符串或函数）和每次执行之前需要等待的毫秒数。
//不建议传递字符串！
setInterval ("console.log('Hello world!') ", 1000);
//推荐的调用方式
setInterval (function() {
console.log("Hello world!");
}, 1000);
调用 setInterval()方法同样也会返回一个间歇调用 ID，该 ID 可用于在将来某个时刻取消间歇调用。要取消尚未执行的间歇调用，可以使用 clearInterval()方法并传入相应的间歇调用 ID。
取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。
1.4.3 超时调用模拟间歇调用
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
num++;
//如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
if (num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(incrementNumber, 500);
上面的间歇调用可以使用下面的超时调用替换掉，一般来说，不推荐使用间歇调用。
var num = 0;
var max = 10;
function incrementNumber() {
num++;
//如果执行次数未达到 max 设定的值，则设置另一次超时调用
if (num < max) {
setTimeout(incrementNumber, 500);
} else {
alert("Done");
}
}
setTimeout(incrementNumber, 500);
1.5 系统对话框 ---- alert()、confirm() 和 prompt() 方法
alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在浏览器中显示的网页没有关系，也不包含 HTML。它们的外观由操作系统及（或）浏览器设置决定，而不是由 CSS 决定。此外，通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。
alert() ： 输出一个确定按钮的对话框，点击确定后对话框关闭。
confirm() ： 输出一个确定按钮和一个取消按钮。点击确定按钮返回true，点击取消按钮返回 false。
prompt() ： 输出一个带有输入框的对话框。可以输入第二个参数，表示输入框内默认值。点击确定按钮返回输入内容（未输入内容返回 “”），点击取消按钮返回 null。
举例：
if (confirm("Are you sure?")) {
alert("I'm so glad you're sure! ");
} else {
alert("I'm sorry to hear you're not sure. ");
}
二、location 对象
location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。
2.1 location 对象将 URL 解析为独立的片段
location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。下图列出了 location 对象的所有属性（注：省略了每个属性前面的 location 前缀）。
2.2 改变当前页面 URL 地址
2.2.1 后退按钮会返回之前页面 ---- location.assign()、window.location 和 location.href
location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";
上面三行代码作用相同，当前页面跳转到新页面。
另外，修改location对象的其他属性也可以改变当前加载的页面。下面的例子展示了通过将hash、search、hostname、pathname 和 port 属性设置为新值来改变 URL。
//假设初始 URL 为 http://www.wrox.com/WileyCDA/
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将 URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将 URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
location.port = 8080;
当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。
2.2.2 后退按钮无法返回之前页面 ---- replace() 方法
replace()方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace()方法之后，用户不能回到前一个页面，来看下面的例子：
location.replace("http://www.wrox.com/");
三、history 对象
3.1 go() 方法
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");
3.2 back() 和 forward() 方法
另外，还可以使用两个简写方法 back()和 forward()来代替 go()。顾名思义，这两个方法可以模仿浏览器的“后退”和“前进”按钮。
//后退一页
history.back();
//前进一页
history.forward();
history 对象还有一个 length 属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。
对于加载到窗口、标签页或框架中的第一个页面而言，history.length 等于 0。通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。
if (history.length == 0){
//这应该是用户打开窗口后的第一个页面
}
四、navigator 对象和 screen 对象
这两个对象，如果碰到就自己百度吧。