摘要：僅限數(shù)值表示新窗口的高度。此時只要檢查這個返回值就可以確定彈窗是否被屏蔽。返回一個布爾值，代表用戶選擇還是返回一個字符串或者，輸入了值并確定，返回字符串，其他方法關(guān)閉返回打印查找對話框。

ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM（瀏覽器對象模型）則無疑才是真正的核心。

W3C為了把瀏覽器中JavaScript最基本的部分標(biāo)準(zhǔn)化，已經(jīng)將BOM的主要方面納入了HTML5規(guī)范中

BOM 的核心對是window，它表示瀏覽器的一個實例。在瀏覽器中window對象既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規(guī)定的Global對象，因此有權(quán)訪問parseInt()等方法

所有在全局作用域中聲明的變量、函數(shù)都會變成window對象的屬性和方法。

定義全局變量與直接在window對象上定義屬性還是有一點差別：全局變量不能通過delete操作符刪除，而直接定義在window對象上的屬性可以

var age = 29;
window.color = "red";

// 在IE < 9 時拋出錯誤，在其他瀏覽器里返回 false
delete window.age;

// 在IE < 9 時拋出錯誤，在其他瀏覽器里返回 true
delete window.color;

console.log(window.age);       // 29
console.log(window.color);     // undefined

全局環(huán)境下使用var語句添加的window屬性有一個名為[[Configruable]]的特性，這個特性的值被設(shè)置為false，因此不可通過delete刪除。IE8及更早版本在遇到使用delete刪除window屬性的語句時，不管該屬性最初如何創(chuàng)建的，都會拋出錯誤，以示警告。

嘗試訪問未聲明的屬性會拋出錯誤，但是通過查詢window對象，可以知道某個可能未聲明的變量是否存在

// 這里會拋出錯誤 oldValue 未定義
var newValue = oldValue;

// 這里不會拋出錯誤，因為這是一次屬性查詢
// newValue的值是 undefined
var newValue = window.oldValue;

如果頁面中包含框架，則每個框架都擁有自己的window對象，并且保存在frames集合中。

在frames集合中，可以通過數(shù)值索引（從0開始，從左至右，從上到下）或者框架名稱來訪問相應(yīng)的window對象。每個window對象都有一個name屬性，其中包含框架的名稱。

可以通過window.frames[0]或者window.frames["topFrame"]來引用上方的框架，不過最好使用top而非window。例如 top.frames[0]

top對象始終指向最高（最外層）的框架，也就是瀏覽器窗口。

與top相對的另一個window對象是parent。parent（父）對象始終指向當(dāng)前框架的直接上層框架。在某些情況下parent有可能等于top,但在沒有框架的情況下，parent一定等于top。此時他們都是window

用來確定和修改window對象位置的屬性和方法有很多。

IE, Safari, Opera, Chrome 都提供了screenLeft 和 screenTop屬性，分別用于表示相對屏幕左邊和上邊的位置。

Firefox 則在 screenX 和 screenY 屬性中提供相同的窗口位置信息， Safari, Chrome也同時支持這兩個屬性。

Opera雖然支持 screenX 和 screenY 屬性，但與 screenLeft 和 screenTop 并不對應(yīng)，因此建議大家不要在 Opera中使用。

使用下列代碼可以跨瀏覽器取得窗口左邊和上邊的位置

// 確定 screenLeft 和 screenTop 屬性是否存在
// 存在，是在 IE, Safari, Opera, Chrome
// 否則，是在 Firefox中
var leftPos = (typeof window.screenLeft == "number") ?
                window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
                window.screenTop : window.screenY;

在IE Opera 中，返回的是頁面到屏幕邊緣的距離（不包括瀏覽器的工具欄等），而 Chrome Firefox Safari 返回的是瀏覽器到屏幕邊緣的距離（包括瀏覽器的工具欄等）。

更讓人抓狂的是， Firefox Safari Chrome 始終返回頁面中每個框架的 top.screenX top.screenY 值。即使在頁面由于被設(shè)置了外邊距發(fā)生偏移的情況下，相對于window對象使用top.screenX top.screenY每次也都會返回相同的值。而IE Opera則會給出框架相對于屏幕辯解的精確坐標(biāo)值。

最終結(jié)果是無法在跨瀏覽器的條件下取得窗口左邊和上邊的精確坐標(biāo)值。

使用moveTo() 和 moveBy()方法，倒是有可能將窗口的精確地移動到一個新位置。這兩個方法都接受兩個參數(shù)

// 將窗口移動到屏幕左上角
window.moveTo(0, 0);

// 將窗口向下移動100像素
window.moveBy(0, 100);

// 將窗口移動到（200， 300）
window.moveTo(200, 300);

// 將窗口向左移動50像素
window.moveBy(-50, 0);

需要注意的是，這兩個方法可能會被瀏覽器禁用；而且在Opera和IE7+中默認(rèn)就是禁用的。

這兩個方法都不適用于框架，只能對最外層的window對象使用。

跨瀏覽器確定一個窗口的大小不是一件簡單的事情。

IE9+ Firefox Safari Opera Chrome 均為此提供了4個屬性：innerwidth innerHeight outerWidth outerHeight。

IE9 Safari Firefox 中 outerWidth outerHeight 返回瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個框架訪問）。

Opera中這兩個屬性的值表示頁面視圖容器的大小。

innerwidth innerHeight則表示容器中頁面視圖區(qū)的大?。p去邊框?qū)挾龋?/p>

Chrome 中 四個值返回的相同，即視口（viewport）大小而非瀏覽器窗口大小。

下面的代碼可以跨瀏覽器取得視口大小，但最終無法確定瀏覽器窗口本身大小

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

// document.compatMode 這個屬性將在第10章討論
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;
  }
}

使用 resizeTo() 和 resizeBy() 方法可以調(diào)整瀏覽器窗口的大小。需要注意，這兩個方法也可能被瀏覽器禁用。在Opera和IE7+中默認(rèn)禁止

這兩個方法不適用于框架，只能對最外層的window對象使用

// 調(diào)整到 100 x 100
window.resizeTo(100, 100);

// 調(diào)整到 200 x 150
window.resizeBy(100, 50);

// 調(diào)整到 300 x 300
window.resizeTo(300, 300);

window.open() 方法既可以導(dǎo)航到一個特定的URL，也可以打開一個新的瀏覽器窗口。接受四個參數(shù)：

要加載的URL

窗口目標(biāo) (窗口或者框架的名字以及特殊窗口名稱： _self, _parent, _top, _blank)

特性字符串（新窗口的特性設(shè)置，逗號分隔）

表示新頁面是否取代瀏覽器歷史記錄中當(dāng)前加載頁面的布爾值

// 等同于 
window.open("http://www.wrox.com", "topFrame");

彈出窗口

如果給window.open()傳遞的第二個參數(shù)并不是一個已經(jīng)存在的窗口或者框架，那么該方法就會根據(jù)在第三個參數(shù)位置上傳入的字符串創(chuàng)建一個新窗口或者新標(biāo)簽。

如果沒有傳入第三個參數(shù)，那么就會打開一個帶有全部默認(rèn)設(shè)置（工具欄、地址欄和狀態(tài)欄等）的新瀏覽器窗口（或者新標(biāo)簽）。

在不打開新窗口的情況下，會忽略第三個參數(shù)。

第三個參數(shù)是一個逗號分隔的設(shè)置字符串，表示新窗口有哪些特性。

window.open()方法會返回一個指向新窗口的引用，大致與其他window對象一致，但我們可以進(jìn)行更多操作控制。

例如有些瀏覽器針對通過window.open()創(chuàng)建的還口不允許我們針對朱瀏覽器窗口調(diào)整大小或移動位置，但卻允許我們針對通過window.open()創(chuàng)建的窗口調(diào)整大小或移動位置。

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

// 新創(chuàng)建的window對象有一個opener屬性
// 保存打開它的原始窗口對象
// 而原始窗口不跟蹤打開的新窗口，沒有指向新窗口對象的屬性
console.log(wroxWin.opener == window); // true

// 調(diào)整大小
wroxWin.resizeTo(500, 500);

// 移動位置
wroxWin.moveTo(100, 100);

// 關(guān)閉新打開的窗口
// 這個方法僅限于通過 window.open() 打開的彈出窗口
// 對于主窗口如果沒有得到用于的允許是不能關(guān)閉它的。
wroxWin.close();

// 彈窗關(guān)閉后，窗口的引用仍然還在
// 但除了檢測其closed屬性沒有其他用處
console.log(wroxWin.closed);    // true

有些瀏覽器（如IE8 和 Chrome）會在獨立的進(jìn)程運行每一個標(biāo)簽頁。當(dāng)一個標(biāo)簽打開另一個標(biāo)簽頁時，如果兩個window對象之間需要彼此通信，那么新標(biāo)簽就不能運行在獨立的進(jìn)程中。

在Chrome中新建的標(biāo)簽頁opener屬性設(shè)置為null，即表示在多帶帶的進(jìn)程中運行新標(biāo)簽

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

wroxWin.opener = null;

安全限制

目前大部分瀏覽器都不能通過第四個參數(shù)修改是否顯示狀態(tài)欄，不允許彈窗到屏幕意外，不允許關(guān)閉地址等等，加強彈窗的安全性，以免用戶和系統(tǒng)對話框混淆。

Chrome采取了不同的處理方式，它不會像其他瀏覽器那樣簡單的屏蔽這些彈窗，而是只是顯示它們的標(biāo)題欄，并放在窗口右下角。

彈出窗口屏蔽程序

大部分瀏覽器或者瀏覽器插件都會屏蔽彈窗，此時window.open()很可能返回null。此時只要檢查這個返回值就可以確定彈窗是否被屏蔽。

var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null) {
  console.log("The popup was blocked!");
}

瀏覽器拓展程序（插件）或其他程序阻止彈窗，那么 window.open()通常會拋出錯誤。因此不但要檢測返回值，還要將對 window.open()的調(diào)用封裝在一個 try-catch 塊中

var bloacked = false;

try {
  var wroxWin = window.open("http://www.wrox.com", "_blank");
  if (wroxWin == null) {
    bloacked = true;
  }
} catch (ex) {
  bloacked = true;
}

if (blocked) {
  console.log("The popup was blocked!");
}

JavaScript是單線程語言，但它允許通過設(shè)置超時值和間歇值來調(diào)度代碼在特定的時刻執(zhí)行。

// 第一個參數(shù)傳遞字符串，不推薦！
setTimeout("alert("Hello World!");", 1000);

// 推薦的方式
setTimeout(() => {
  alert("Hello World!");
}, 1000);

JavaScript是一個單線程解釋器，因此一定時間內(nèi)只能執(zhí)行一段代碼。為了控制要執(zhí)行的代碼，就有一個JavaScript任務(wù)隊列。這些任務(wù)會按照將他們添加到隊列中的順序執(zhí)行。

第二個參數(shù)是告訴JavaScript再過多久把當(dāng)前任務(wù)添加到隊列中。之后如果隊列是空的，那么添加的代碼會立即執(zhí)行，如果不是空的，那么就要等前面的代碼執(zhí)行完了以后再執(zhí)行。

該方法會返回一個數(shù)值ID，這是計劃執(zhí)行代碼的唯一標(biāo)識符，可以通過它來取消超時調(diào)用。

var timeoutId = setTimeout(() => {
  alert("Hello World!");
}, 1000);

// 取消執(zhí)行
clearTimeout(timeoutId);

超時調(diào)用的代碼都是在全局作用域中執(zhí)行的，因此函數(shù)中 this 的值在非嚴(yán)格模式下 指向 window ，在嚴(yán)格模式下是 undefined。

setInterval()用法與上述類似

alert(), confirm(), prompt() 方法可以調(diào)用系統(tǒng)對話框向用戶顯示消息。系統(tǒng)對話框與瀏覽器中顯示的網(wǎng)頁沒有關(guān)系，不包含HTML，外觀由操作系統(tǒng)和瀏覽器設(shè)置決定。打開對話框都是同步和模態(tài)的。也就是說，這些對話顯示的時候，代碼會停止執(zhí)行，而關(guān)掉這些對話框又會恢復(fù)執(zhí)行。

confim() 返回一個布爾值，代表用戶選擇"ok"還是"cancel"

prompt() 返回一個字符串或者null，輸入了值并確定，返回字符串，其他方法關(guān)閉返回null

打印、查找 對話框 print() find()。沒什么卵用

location是最有用的BOM對象之一，它提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供一些導(dǎo)航功能。

location 對象既是window對象的屬性，也是document對象的屬性；換言之，window.location document.location引用的是同一個對象。

雖然上表的屬性可以訪問到location對象大多數(shù)信息，但是其中訪問URL包含查詢字符串的屬性并不方便。盡管location.search返回從問號到URL末尾的所有內(nèi)容，但卻沒有辦法逐個訪問其中的每個查詢字符串參數(shù)。

為此我們可以創(chuàng)建如下函數(shù)

funcction getQueryStringArgs() {

  // 取得查詢字符串并去掉開頭的問號
  var qs = (location.search.length > 0 ? location.search.substring(1) : "");

  // 保存數(shù)據(jù)的對象
  var args = {};

  // 取得每一項
  var items = qs.length ? qs.split("&") : [];
  var item = null;
  var name = null;
  var value = null;

  // 在for循環(huán)中使用
  var i = 0;
  var len = items.length;

  // 逐個將每一項添加到args對象中
  for (var 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。立即打開新的URL并在瀏覽器的歷史記錄中生成一條記錄。如果是將location.href或window.location設(shè)置為一個URL值，也會以該值調(diào)用assign()方法。

location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.;

另外修改location對象的其他屬性也可以改變當(dāng)前加載的頁面。下面的例子展示了通過將hash, search, hostname, pathname, prot 屬性設(shè)置為新值來改變URL

// 假設(shè)初始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.wrox.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;

每次修改location屬性（hash除外），頁面都會以新URL重新加載

通過上述任何一種方式修改URL之后，瀏覽器的歷史記錄中就會生成一條新紀(jì)錄，因此用戶通過單擊“后退”按鈕都會導(dǎo)航到前一個頁面。要禁用這種行為，可以使用replace()方法。這個方法只接受一個參數(shù)，即要盜號的URL。雖然結(jié)果會導(dǎo)致瀏覽器位置改變，但不會在歷史記錄中生成新記錄。在調(diào)用replace()方法后，用戶不能回到前一個頁面

在IE8 Firefox 1 Safari 2+ Opera9+ Chrome 中，修改hash的值會在瀏覽器的歷史記錄中生成一條記錄。在IE早期版本中，hash屬性不會再用戶單擊“后退”和“前進(jìn)”按鈕時被更新，而只會在用戶單擊包含hash的URL時才會被更新

reload() 作用是重新加載當(dāng)前頁面的顯示。如果不傳參，頁面就會以最有效的方式重新加載。如果頁面上次請求一來并沒有改變過，頁面就會從瀏覽器緩存中重新加載。如果要強制從服務(wù)器重新加載，則需要像下面這樣為該方法傳遞參數(shù)true

位于reload()調(diào)用之后的代碼可能會也可能不會執(zhí)行，這要取決于網(wǎng)絡(luò)延遲或系統(tǒng)資源等因素。為此最好將reload()放在代碼的最后一行

每個瀏覽器中的navigator對象表現(xiàn)是一致的，也有一套自己的屬性

檢測瀏覽器中是否安裝了特定的插件是一種最常見的檢測歷程。對于非IE瀏覽器，可以使用plugins數(shù)組來達(dá)到這個目的。該數(shù)組中的每一項都包含下列屬性。

name: 插件名字

description： 插件的描述

filename： 插件的文件名

length: 插件所處理的MIME類型數(shù)量

一般來說name屬性中會包含檢測插件必需的所有信息，但有時候也不完全如此。在檢測插件時，需要像下面這樣循環(huán)代碼每個插件并將插件的name與給定的名字進(jìn)行比較

// 檢測插件（在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;
}

//  檢測flash
console.log(hasPlugin("Flash"));

//  檢測QuickTime
console.log(hasPlugin("QuickTime"));

檢測IE中的插件比較麻煩，因為IE不支持Netscape式的插件，唯一的方式是使用專用的ActiveXObject類型，并嘗試創(chuàng)建一個特定插件的實例。IE是以COM對象的方式實現(xiàn)插件的，而COM對象使用唯一標(biāo)識符來標(biāo)識。因此要想檢測特定的插件，就必須知道其COM標(biāo)識符，例如Flash的標(biāo)識符是ShockwaveFlash.ShockwaveFlash。知道唯一標(biāo)識符后，就可以編寫下面的函數(shù)來檢測

// 檢測IE中的插件
function hasIEPlugin(name) {
  try {
    new ActiveXObject(name);
    return true
  } catch (ex) {
    return false;
  }
}

//  檢測flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

//  檢測QuickTime
console.log(hasIEPlugin("QuickTime.QuickTime"));

鑒于兩種方式差別較大，典型的做法是針對每個插件分別創(chuàng)建檢測函數(shù)

// 檢測所有瀏覽器中的Flash
function hasFlash() {
  var result = hasPlugin("Flash");
  if (!result) {
    result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
  }
  return result;
}

plugins集合有一個名叫refresh()的方法，用于刷新plugins以反映最新安裝的插件。這個方法接收一個參數(shù)：表示是否應(yīng)該重新加載頁面的一個布爾值。如果將這個值設(shè)為true，則會重新加載包含插件的所有頁面；否則只更新plugins集合，不重新加載頁面。

registerContentHandler() 和 registerProtocolHandler() 方法可以讓一個站點知名它可以處理特定類型的信息。隨著RSS閱讀器和在線電子郵件程序的信息，注冊處理程序就為像使用桌面應(yīng)用程序一樣默認(rèn)使用這些在線應(yīng)用程序提供了一種方式。

registerContentHandler()接收三個參數(shù)：

要處理的MIME類型

可以處理的MIME類型的頁面的URL

應(yīng)用程序的名稱

// 要將一個站點注冊為處理RSS源的處理程序
navigator.registerContentHandler("application/rss+xml",
  "http://www.somereader.com?feed=%s", "Some Reader");

registerProtocolHandler() 也是三個參數(shù)

要處理的協(xié)議 （mailto 或 ftp）

處理該協(xié)議的頁面的URL

應(yīng)用程序的名稱

// 要將一個應(yīng)用程序注冊為默認(rèn)的郵件客戶端
navigator.registerProtocolHandler("mailto",
  "http://www.somemailclient.com?cmd=%s", "Some Mail Client");

screen對象基本只用來表明客戶端的能力，其中包括瀏覽器窗口外部的顯示器信息，如像素寬度和高度等。

用處不大

history對象保存著用戶上網(wǎng)的歷史記錄，從窗口被打開的那一刻算起。因為history是window對象的屬性，因此每個瀏覽器窗口，每個標(biāo)簽頁，乃至每個框架都有自己的history對象與特定的window對象關(guān)聯(lián)。

出于安全考慮，開發(fā)人員無法得知用戶瀏覽器過的URL。不過借由用戶訪問過的頁面列表，同樣可以在不知道實際URL的情況視線后退和前進(jìn)

使用go()方法可以在用戶的歷史記錄中任意跳轉(zhuǎn)，可以向前向后，接受一個參數(shù)整數(shù)值或者字符串。

// 后退一頁
history.go(-1);

// 前進(jìn)一頁
history.go(1);

// 前進(jìn)兩頁
history.go(2);

// 傳入字符串會跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個位置
// 如果沒有包含的記錄，則什么都不做
history.go("wrox.com");

還可以使用兩個簡寫方法代替 back() 和 forward()。這兩個方法模仿瀏覽器的“后退”“前進(jìn)”按鈕

history還有一個length屬性，保存著歷史記錄的數(shù)量。包括所有的歷史記錄，即所有向前和向后的記錄。對于加載到窗口、標(biāo)簽頁或框架中的第一個頁面而言，hitosty.length等于0

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