BOM
下述内容主要讲述了《JavaScript高级程序设计（第3版）》第8章关于“BOM”。
BOM（浏览器对象模型）提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。
一、window对象
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
1. 全局作用域
由于window对象同时扮演者ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。 区别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。
var a = 1;
delete a; // false
console.log(a); // 1
window.b = 1;
delete window.b; // true
console.log(window.b); // undefined还需记住：尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。
// Uncaught ReferenceError: oldValue is not defined(…)
var newValue = oldValue;
// 不会抛出错误，值为undefined
var newValue = window.oldValue;2. 窗口关系及框架
对象 | 说明 | 示例 |
|---|---|---|
top | top对象始终指向最高（最外）层的框架，也就是浏览器窗口 | top.frames[0] |
parent | parent（父）对象始终指向当前框架的直接上层框架 | parent.frames[0] |
self | 始终指向window | self |
说明： （1）window对象指向的都是那个框架的特定实例，而非最高层的框架。 （2）没有框架的情况下，parent一定等于top（此时它们都等于window）。
3. 窗口位置&窗口大小
window.moveTo(100, 100); // 调整到距离左边和上边的坐标为（100, 100）
window.moveBy(100, 50); // 调整到距离左边和上边的坐标为（200, 50）window.resizeTo(100, 100); // 调整到100*100
window.resizeBy(100, 50); // 调整到200*1504. 导航和打开窗口
window.open(“要加载的URL”, “窗口目标或_slef、_parent、_top或_blank”, “特性字符串”, “新窗口是否取代浏览器历史记录中当前页面的布尔值”);
"http://blog.csdn.net/ligang2585116" target="myFrame">
// 等价于
var newWin = window.open("http://blog.csdn.net/ligang2585116", "myFrame");示例：弹出窗口
"javascript:;" onclick="openWin();">打开新窗口
"javascript:;" onclick="closeWin();">关闭新窗口
<span class="hljs-keyword">var</span> newWin;
<span class="hljs-javadoc">/**
* 打开新窗口
*/</span>
function openWin(){
newWin = window.open(<span class="hljs-string">"http://blog.csdn.net/ligang2585116"</span>, <span class="hljs-string">"_blank"</span>);
<span class="hljs-comment">// 轮询监听子窗口是否被关闭</span>
<span class="hljs-keyword">var</span> timer = setInterval(function(){
<span class="hljs-keyword">if</span>(newWin.closed){
newWin = <span class="hljs-keyword">null</span>;
clearInterval(timer);
console.log(<span class="hljs-string">"子窗口已被关闭"</span>);
}
}, <span class="hljs-number">100</span>);
}
<span class="hljs-javadoc">/**
* 在父窗口中关闭子窗口
*/</span>
function closeWin(){
newWin.close();
}5. 间歇调用和超时调用
（1）超时调用的代码都是在全局作用域中执行的，因此函数中this的值在非严格模式下指向window对象，在严格模式下是undefined。 （2）在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。 请参考：JavaScript高级技巧
6. 系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。这几个对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。 还有两个可以通过JavaScript打开的对话框，即“查找”和“打印”。
// 显示“打印”对话框
window.print();
// 显示“查找”对话框
window.find();二、location对象
location是最有用的BOM对象之一，其既是window对象的属性，也是location对象的属性。换言之，window.location和document.location引用的是同一对象。
示例：http://blog.csdn.net/ligang2585116?name=ligang&age=26#top
属性名 | 说明 | 示例结果 |
|---|---|---|
hash | 返回URL中的hash（#号后跟零或多个字符） | “#top” |
host | 返回服务器名称和端口号（如果有） | “blog.csdn.net” |
hostname | 返回不带端口号的服务器名称 | “blog.csdn.net” |
href | 返回当前加载页面的完整URL（同toString方法） | “http://blog.csdn.net/ligang2585116?name=ligang&age=26#top” |
pathname | 返回URL中的目录 | “/ligang2585116” |
port | 返回URL中的端口号，如果不存在返回空字符串 | “” |
protocol | 返回页面使用的协议 | “http:” |
search | 返回URL的查询字符串，以问好开头 | “?name=ligang&age=26” |
1. 查询字符串参数
示例：解析字符串（传统）
function urlArgs(){
var args = {};
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0; ivar pos = pairs[i].indexOf('=');
if(pos == -1) continue;
var name = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
value = decodeURIComponent(value);
args[name] = value;
}
return args;
}
urlArgs();示例：解析字符串（正则）– JavaScript正则表达式
function enhanceUrlArgs(query){
var args = {};
query.replace(/([^?&=]+)=([^&])/g, function(full, key, value){
args[key] = value;
return "";
});
return args;
}
enhanceUrlArgs(location.search);2. 位置操作
使用location对象可以通过很多方式改变浏览器的位置。
// 立即打开新URL并在浏览器的历史记录中生成一条记录
location.assign("http://blog.csdn.net/ligang2585116");如果是将location.href或是window.location设置为一个URL值，也会以该值调用assign()方法。
// 与显示调用assign()方式效果完全一样
window.location = "http://blog.csdn.net/ligang2585116";
location.href = "http://blog.csdn.net/ligang2585116";修改location对象的其他属性也可以改变当前加载的页面。每次修改location的属性（hash除外），页面都会以新URL重新加载！！浏览器的历史记录中会生成一条记录，点击“后退”按钮会导航到前一个页面。
// replace()方法会禁止“后退”，其不在历史记录中生成新记录
location.replace("http://blog.csdn.net/ligang2585116");location.reload(); // 重新加载（有可能从缓存中加载）
location.reload(true); // 重新加载（从服务器重新加载）注意：不传递参数时，页面会以最有效的方式重新加载。如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。传递参数true，会强制从服务器重新加载。
三、navigator对象
识别客户端浏览器的实际标准。
属性或方法 | 说明 | 示例 |
|---|---|---|
cookieEnabled | 表示cookie是否启用 | true |
language | 浏览器主语言 | “zh-CN” |
onLine | 表示浏览器是否连接到了因特网 | true |
platform | 浏览器所在的系统平台 | “MacIntel” |
plugins | 浏览器中安装的插件信息的数组 | PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5} |
userAgent | 浏览器的用户代理字符串 | “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36” |
四、screen对象
// 调整浏览器窗口大小，使其占据屏幕的可用空间
window.resizeTo(screen.availWidth, screen.availHeight);注意：许多浏览器都会禁用调整浏览器窗口大小的能力（如：Chrome）
五、history对象
history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。 使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
// 后退一页
history.go(-1);
history.back();
// 前进一页
history.go(1);
history.forward();示例：检查是否是打开的第一个页面
if(history.length == 0){
// 这应该是用户打开窗口后的第一个页面
}