總覽

• BOM
  • window對(duì)象
    • 全局作用域
    • 窗口
    • 間歇調(diào)用和超時(shí)調(diào)用
  • location對(duì)象
  • navigator對(duì)象
  • screen對(duì)象
  • history對(duì)象

window對(duì)象

這是BOM的核心

1.全局作用域

在全局作用域中聲明的變量、函數(shù)都是window的屬性和方法

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

全局變量不能用delete刪除，但是直接在window上定義的屬性可以

var age = 29;
window.color = "red";
//在IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回false
console.log(delete age);
//在IE < 9 時(shí)拋出錯(cuò)誤，在其他所有瀏覽器中都返回true
delete window.color; //returns true
console.log(age); //29
console.log(window.color); //undefined

2.窗口
window.frames中保存著框架的集合

• 窗口位置
  screenLeft 和screenTop 屬性，分別用于表示窗口相對(duì)于屏幕左邊和上邊的位置。
  跨瀏覽器取得窗口左邊和上邊的位置

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

• 窗口大小
  4 個(gè)屬性：innerWidth、innerHeight、outerWidth 和outerHeight。不同的瀏覽器返回的值有所不同。在IE9+、Safari 和Firefox中，outerWidth 和outerHeight 返回瀏覽器窗口本身的尺寸（無(wú)論是從最外層的window 對(duì)象還是從某個(gè)框架訪問(wèn)）。在Opera 中，這兩個(gè)屬性的值表示頁(yè)面視圖容器的大小。而innerWidth 和innerHeight則表示該容器中頁(yè)面視圖區(qū)的大?。p去邊框?qū)挾龋?。在Chrome 中，outerWidth、outerHeight 與innerWidth、innerHeight 返回相同的值，即視口（viewport）大小而非瀏覽器窗口大小。在IE6 中，這些屬性必須在標(biāo)準(zhǔn)模式下才有效；如果是混雜模式，就必須通過(guò)document.body.clientWidth 和document.body.clientHeight 取得相同信息。
  跨瀏覽器獲取頁(yè)面視口的大小

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;
}
}

• 導(dǎo)航和打開(kāi)窗口
  window.open(url)在新窗口中打開(kāi)連接

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

wroxWin.opener = null;禁止老窗口和新窗口通信

• 間歇調(diào)用和超時(shí)調(diào)用
  很重要，詳情參見(jiàn)setTimeout和setInterval

2.location對(duì)象

提供與當(dāng)前窗口中加載文檔有關(guān)的信息，還提供了一些導(dǎo)航功能。location對(duì)象既是window的屬性也是document對(duì)象的屬性。window.location和document.location指向同一個(gè)對(duì)象。location姑且認(rèn)為是URL。

• 查詢字符串參數(shù)
  查詢字符串參數(shù)的栗子。借助location.search獲取到URL[？s=b&v=f...#）之間的內(nèi)容('['取，'）'不取)

function getQueryStringArgs(){
//取得查詢字符串并去掉開(kāi)頭的問(wèn)號(hào)
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
//保存數(shù)據(jù)的對(duì)象
args = {},
//取得每一項(xiàng)
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
//在for 循環(huán)中使用
i = 0,
len = items.length;
//逐個(gè)將每一項(xiàng)添加到args 對(duì)象中
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很多方式可以改變?yōu)g覽器的位置，assign(url)方法在瀏覽器中生成一條記錄，可以使用后退按鈕導(dǎo)航到前一個(gè)頁(yè)面。但是replace(url)方法不能后退到前一個(gè)頁(yè)面。reload()作用是重新加載當(dāng)前顯示的頁(yè)面

location.assign(''http://www.baidu.com")
//下面兩句相當(dāng)于隱式調(diào)用assign()方法。
window.location=''http://www.baidu.com"
location.href=''http://www.baidu.com"
//不能后退到前一個(gè)頁(yè)面
location.replace(''http://www.baidu.com")

navigator對(duì)象

提供瀏覽器詳細(xì)信息

• 檢測(cè)插件
  對(duì)于非IE 瀏覽器，可以使用plugins 數(shù)組來(lái)達(dá)到這個(gè)目的。該數(shù)組中的每一項(xiàng)都包含下列屬性。
• name：插件的名字。
• description：插件的描述。
• filename：插件的文件名。
• length：插件所處理的MIME 類型數(shù)量。

//非IE
  function hasPlugin(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 中檢測(cè)插件的唯一方式就是使用專有的ActiveXObject 類型，并嘗試創(chuàng)建一個(gè)特定插件的實(shí)例。IE 是以COM對(duì)象的方式實(shí)現(xiàn)插件的，而COM對(duì)象使用唯一標(biāo)識(shí)符來(lái)標(biāo)識(shí)。因此，要想檢查特定的插件，就必須知道其COM標(biāo)識(shí)符。

function hasIEPlugin(name){
  try{
    new ActiveXObject(name)
    return true
  }catch(ex){
    return false
  }
}

screen對(duì)象

提供用戶顯示器分辨率詳細(xì)信息

history對(duì)象

保存在用戶歷史記錄信息。

//后退一頁(yè)
history.go(-1);
//前進(jìn)一頁(yè)
history.go(1);
//前進(jìn)兩頁(yè)
history.go(2);
//跳轉(zhuǎn)到最近的wrox.com 頁(yè)面
history.go("wrox.com");
//跳轉(zhuǎn)到最近的nczonline.net 頁(yè)面
history.go("nczonline.net");
//后退一頁(yè)
history.back();
//前進(jìn)一頁(yè)
history.forward();

history 對(duì)象還有一個(gè)length 屬性，保存著歷史記錄的數(shù)量。

if (history.length == 0){
//這應(yīng)該是用戶打開(kāi)窗口后的第一個(gè)頁(yè)面
}

參考資料：JavaScript高級(jí)程序設(shè)計(jì)（第3版）