js BOM

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 的值。

4、窗口的大小

对于确定窗口的大小，IE8 及其以下版本只能通过 DOM 来操作窗口的大小，其他浏览器（IE9+、Firefox 、Safari、Opera 和 Chrome）中均提供了 4 个属性：innerWidth、innerHeight、outerWidth 和 outerHeight。

在 IE9+、Firefox 、Safari 中，outerWidth 和 outerHeight 返回浏览器窗口本身的大小。
在 Opera 中，outerWidth 和 outerHeight 表示页面视图容器的大小（整个页面的大小），innerWidth 和 innerHeight 表示该容器中视图区的大小（减去边框宽度）。
在 Chrome 中，outerWidth、outerHeight 与 innerWidth、innerHeight 返回相同的值，表示视图区。

那么问题来了，如何跨浏览器获取窗口的大小呢？

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（这个属性在 DOM 中会有详解）是不是处于标准模式，是就通过 document.documentElement 来取值，不是就通过 document.body 来取值。

有关移动设备视口比较复杂，更多的问题研究推荐：http://t.cn/zOZs0Tz

5、导航和打开窗口（了解）

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

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

通常 window.open() 方法只传递一个参数，最后一个参数只在不打开新窗口的情况下使用。

6、间歇调用和超时调用

（1）、间歇调用：setInterval() 方法

setInterval() 方法接收两个参数：要执行的代码和每次执行前需要等待的毫秒数。

var myInterval = setInterval(function(){
    console.log("hello world");
}, 3000);

// ...

// 取消定时器
clearInterval(myInterval);

（2）、超时调用：setTimeOut() 方法

setTimeOut() 方法接收两个参数：要执行的代码和每次执行前需要等待的毫秒数。与 setInterval() 方法接收的参数相同。

var myTimeOut = setTimeout(function(){
    console.log("hi boy");
}, 3000);

// ...

// 取消延时器
clearTimeout(myTimeOut);

7、系统对话框（了解）

系统对话框也就是模态框，浏览器通过 alert()、confirm() 和 prompt() 方法调用系统对话框向用户展示消息，它们的外观由操作系统和浏览器决定，而不是由 CSS 决定。

显示系统对话框时，代码停止执行，关掉系统对话框后代码会恢复执行。

二、location 对象

location 对象保存着当前文档的信息；
location 对象可以将 URL 解析为独立的片段；
location 对象提供了一些导航功能；
location 对象既是 window 对象的一个属性，又是 document 对象的一个属性，即：window.location === document.location。

下表列出了 location 对象的所有属性：

属性名	例子	说明
hash	"#contents"	返回 URL 中的 hash（# 号后跟零或多个字符），如果 URL中不包含散列，则返回空字符串
host	"www.abc.com:8080"	返回服务器名称和端口号（如果有）
hostname	"www.abc.com"	返回不带端口号的访问器名称
href	"http:/www.abc.com"	返回当前加载页面的完整 URL。location 对象的 toString() 方法也返回这个值
pathname	"/myWorld/"	返回 URL 中的目录和（或）文件名
port	"8080"	返回 URL 中指定的端口号。若 URL 中不包含端口号，就返回空字符串。
protocol	"http:"	返回页面使用的协议。通常是 http: 或 https:
search	"?n=name"	返回 URL 的查询字符串参数。这个字符串以问号开头

1、查询字符串参数

虽然通过 location.search 能够获取到完整的查询字符串参数，但是却不能逐个访问其中的每个查询字符串参数。为此，可以像下面这样创建一个函数，用来解析查询的字符串，然后返回一个包含所有查询字符串参数的对象：

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 < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}

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

console.log(args);                           // {q: "javascript", num: "10"}
console.log(agrs["q"]);                      // javascript
console.log(agrs["num"]);                    // 10

上述函数中，首先，去掉查询字符串开头的问号（前提是 location.search 不为空）；然后，将所有的参数保存在 args 对象中；然后，根据和号（&）来分割查询字符串，并返回 “name=value” 格式的字符串数组 items；然后，通过 for 循环会迭代 items 数组，根据等于号（=）来分割 items 数组的每一项，并返回 item 数组；然后，分别取 item[0] 作为参数名、取 item[1] 作为参数值（这两个值都需要用 decodeURIComponent() 方法进行解码）；然后，将 name 作为 args 对象的属性，将 value 作为相应的属性值；最后，返回 args 对象。

这样，每个查询字符串参数都成了返回对象的属性了，极大的方便了对每个参数的访问。

2、位置操作

location 对象提供了一些导航功能，能够改变浏览器的位置。

（1）、重新加载当前页

location.reload()

（2）、导航去一个新页面，可以后退到当前页

location.href = "http://www.baidu.com";

window.location = "http://www.baidu.com";

location.assign("http://www.baidu.com");

这样，就可以立即打开新的 URL 并在浏览器的历史记录中生成一条记录，最常用的是 location.href() 方法。

（3）、导航去一个新页面，不能后退到当前页

每次修改 location 的属性（hash 除外），页面都会以新的 URL 重新加载，并在浏览器的历史记录中生成一条记录，用户通过点击“后退”按钮就会导航到前一个页面，要禁用这种行为可以使用 location.replace() 方法：

location.replace("http://www.baidu.com");

这样，浏览器的位置改变后不会在历史记录中生成新的记录，所以用户就不能回到前一个页面了。

三、navigation 对象

navigation 对象通常用于检测网页浏览器的事实标准。

navigation 对象最重要的一个属性是 plugins，其中保存着浏览器中安装的插件信息数组。

1、检测插件

对于非 IE 浏览器，可以使用 plugins 数组来检测浏览器中是否安装了特定的插件。plugins 数组包含以下属性：

name：插件的名字；
description：插件的描述；
filename：插件的文件名；
length：插件所处理的 MIME 类型数量。

对于 IE 浏览器，因为 IE 不支持 Netacape 的插件，所以只能使用 IE 浏览器提供的 ActiveXObject 类型来检测了。使用 ActiveXObject 类型时，需要 new 一个实例，把要检测的插件名字作为参数传进去。

// 检测插件（IE中无效）
function hansPlugin(name){
    name = name.toLowerCase();
    for(var i=0; i<navigator.plugins.length; i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}
// 检测IE中的插件
function hasIEPlugin(name){
    try {
        new ActiveXObject(name);
        return true;
    } catch (ex) {
        return false;
    }
}
// 检测所有浏览器中的Flash插件
function hasFlash(){
    var result = hansPlugin("Flash");
    if(!result){
        result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    }
    return result;
}
// 检测所有浏览器中的QuickTime插件
function hasQuickTime(){
    var result = hansPlugin("QuickTime");
    if(!result){
        result = hasIEPlugin("QuickTime.QuickTime");
    }
    return result;
}

console.log(hasFlash());
console.log(hasQuickTime());

另外，plugins 数组有一个名叫 refresh() 的方法，用于刷新 plugins 数组，以反映最新安装的插件。这个方法接收一个参数，表示是否应该重新加载页面的一个布尔值。如果是 true，则会重新加载包含插件的所有页面；否则，只更新 plugins 数组，不重新加载页面。

2、注册处理程序

registerProtocolHandler() 方法：让站点指明它可以处理特定类型的信息。

registerProtocolHandler（）接收三个参数：要处理的协议类型、处理该协议的页面的 URL 和应用程序的名称。

例如：如何将一个站点注册为处理 RSS 源的处理程序？

navigator.registerProtocolHandler("application/rss+xml", "http://www.baidu.com?feed=%s", "Some Reader");

上述代码中，“%s”表示 RSS 源的 URL，由浏览器自动插入。当下一次请求 RSS 源时，浏览器就会打开指定的 URL，而相应的 Web 应用程序将以适当的方式来处理该请求。

四、screen 对象（了解）

screen 对象用来表明客户端的能力，包括浏览器窗口外部的显示器的信息，如像素宽度和高度。

五、history 对象

history 对象保存着用户的上网记录。

1、history.go() 方法

go() 方法接收 1 个数值参数时：正数表示向前跳转；负数表示向后跳转。

go() 方法接收 1 个字符串参数时：浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退一页也可能前进一页。

2、history.back() 方法

后退一页。

3、history.forward() 方法

前进一页。