浏览器对象模型——BOM

ECMAScript 是JavaScript的核心。但如果要在Web中使用JavaScript，那么BOM无疑是真正的核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关。

一. window对象

1.1 全局作用域

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。

由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
tips:

1. 定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。
2. 尝试访问未声明的变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在。（不存在返回undefined）

1.2 窗口位置

跨浏览器取得窗口相对于屏幕左边和上边的位置：（Opera也有screenX和screenY属性，但与screenLeft和screenTop 并不对应）

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

1.3 页面视口大小

获取页面视口大小：

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.4 window.open()

使用window.open()方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。这个方法可以接受4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。
如果window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。

1.5 间歇条用和超时调用

超时调用：setTimeout()
取消超时调用：clearTimeout()
间歇调用：setInterval()
取消间歇调用：clearInterval()

JavaScript是一个单线程的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

二. location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象是很特别的一个对象，因为它既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。location对象的用处不只表现在它保存着当前文档的信息，还表现在它将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。
下表列出了location对象的所有属性（注：省略了每个属性前面的location前缀）。

属性名	例子	说明
hash	“#contents”	返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host	“www.wrox.com:80”	返回服务器名称和端口号（如果有）
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	“http://www.wrox.com”	返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值
pathname	“/WileyCDA/”	返回URL中的目录和文件名
port	“8080”	返回URL中指定的端口号。如果URL中不包含端口号，则返回空字符串
protocol	“http:”	返回页面使用的协议
search	“?q=javascript”	返回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,

    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对象的方法
location.assign(url)-- 设置当前文档的URL,并在浏览器的历史记录中生成一条记录
location.replace(url) – 设置当前文档的URL，不会在历史记录中生成新记录
location.reload() – 重载当前页面 //可能从缓存中加载
location.reload(true) – 重载当前页面 //从服务器重新加载

三. navigator对象

属性或方法	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。
plugins[]	浏览器中安装的插件信息的数组

四. screen对象

Screen 对象包含有关客户端显示屏幕的信息。

属性	描述
availHeight
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

五. history对象

history对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为history是window对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
history.go() – 前进或后退指定的页面数 history.go(num);
history.back() – 后退一页
history.forward() – 前进一页
history.length – 保存历史记录的数量