《JavaScript高級程序設計》讀書筆記--8-BOM

BOM。瀏覽器對象模型，提供了很多對象，用於訪問瀏覽器的功能，這些功能與任何網頁內容無關。

window對象

BOM的核心對象是window，表示瀏覽器的一個實例。
全局作用域
在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。
全局變量不能通過delete操作符刪除，而直接在window對象上的定義的屬性可以。
嘗試訪問未聲明變量會拋出錯誤，但是通過查詢window對象，可以知道某個可能未聲明的變量是否存在。
窗口關係及框架
如果頁面中包含框架，則每個框架都擁有自己的window對象，並且保存在frames集合中。在frames集合中，可以通過數值索引（從0開始，從左至右、從上到下）或者框架名稱來訪問相應的window對象。每個window對象都有一個name屬性，其包含框架的名稱。
下圖展示了在最高層窗口中，通過代碼來訪問前面例子中每個框架的不同方式。

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

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

moveTo()和moveBy()方法可以將窗口精確的移動到一個新位置。moveTo()接收的是新位置的x和y座標值，moveBy()接收的是在水平和垂直方向上移動的像素數。

//將窗口移動到屏幕坐上角
window.moveTo(0,0);
//將窗口向下移動100像素
window.moveBy(0,100);
//將窗口移動到（200，300）
window.moveTo(200,300);
//將窗口左移50像素
window.moveBy(-50,0);

z這兩種方法可能會被瀏覽器禁用，也不適用於框架，只能對最外層的window對象使用。
窗口大小
outerWidth和outerHeight返回瀏覽器窗口本身的尺寸（無論是從最外層的window對象還是從某個框架訪問）。innerWidth和innerHeight則表示該容器中頁面視圖區的大小（減去邊框寬度）。
resizeTo(）和resizeBy()方法可以調整瀏覽器窗口的大小。resizeTo接收瀏覽器窗口的新寬度和新高度，resizeBy接收新窗口與原窗口的寬度和高度之差。

//調整到100*100
window.resizeTo(100,100);
//調整到200*150
window.resizeBy(100,50);
//調整到300*300
window.resizeTo(300,300);

可能會被瀏覽器禁用，也不適用於框架，只能對最外層window對象使用。
導航和打開窗口
使用window.open()方法可以導航到一個特定的URL，也可以打開一個新的瀏覽器窗口。

//等同於<a href="http://www.wrox.com" target="topFrame">
window.open("http://www.wrox.com","topFrame");

彈出窗口
如果給window.open()傳遞的第二個參數並不是一個已經存在的窗口或者框架，那麼該方法會根據第三個參數位置上傳遞的字符串創建一個新窗口或者新標籤頁。若沒有第三個參數，就會打開一個新瀏覽器窗口，在不打開新窗口的情況下，會忽略第三個參數。

window.open()打開的窗口可以通過close()方法關閉。
間歇調用和超時調用
js是單線程語言，但他允許通過設置超時值和間歇時間來調度代碼在特定時刻執行。前者是在指定的時間過後執行代碼，後者則是在每隔指定時間就執行一次代碼。
超時調用需要使用window對象的setTimeout()方法，它接收兩個參數：需要執行的代碼和以毫秒錶示的時間（即在執行代碼前需要等待多少毫秒數）。其中，第一個參數可以是一個包含js代碼的字符串（就和eval（）函數中使用的字符串一樣），也可以是一個函數。

setTimeout("alert('hello')",1000);
//不建議傳遞字符串
setTimeout(function(){
    aler("hello");
},1000);
//推薦使用這種方法

js是單線程的解釋器，因此一定時間內只會執行一段代碼，所以可能會導致經過指定時間後指定的代碼也不一定會執行，這些任務會按照他們添加到隊列的順序執行，如果隊列是空，則代碼會立即執行，如果不爲空，那麼就要等待前面的代碼執行完成以後在執行。
調用setTimeout之後會返回一個數值ID，表示超時調用，他是計劃執行代碼的唯一標識符，可以通過他調用clearTimeout方法來取消相應的超時調用。

//設置超時調用
var timeoutId = setTimeout(function(){
    alert("hello");
},1000);
//注意：把他取消
clearTimeout(timeoutId);

間歇調用與超時調用類似，只不過他會按照指定的時間間隔重複執行代碼，直至調用被取消或者頁面被卸載。其調用的方法是setInterval()，它接收的參數與setTimeout()相同：要執行的代碼和每次執行之前需要等待的毫秒數，

setInterval(function(){
    alert("hello");
},10000);

要取消可以使用clearInterval()方法，並傳入相應的間歇調用的ID。
使用超時調用來模擬間歇調用是一種最佳模式，最好不要使用間歇調用。
系統對話
瀏覽器通過alert()、confirm()和prompt()方法可以調用系統的對話框向用戶顯示消息。
還有print（）和find（）方法，與通過瀏覽器菜單的打印和查找命令打開的對話框相同。

location對象

location既是window對象的屬性也是document對象的屬性。換句話說，window.location和document.location引用的是同一個對象。
location對象的所有屬性

查詢字符串參數

function getQueryStringArgs(){
    //取得查詢字符串並去掉開頭的問號
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //保存數據的對象
    args = {},
    //取得每一項
    items = qs.length ? qs.split('&') : [],
    item = null,
    name = null,
    value = null,
    //在for循環中使用
    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;
}

//假設查詢字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]);//“jacascript”
alert(args["num"]);//“10”

位置操作

//打開新URL並在瀏覽器歷史記錄中生成一條記錄
location.assign("http://www.wrox.com");
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

//假設初始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.yahoo.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重新加載。
replace()方法可以導航到指定的URL而不會在瀏覽器的歷史記錄中生成新的記錄，所以，也不會有後退按鈕返回到前一個頁面。
reload()方法作用是重新加載當前顯示的頁面，不傳遞任何參數時，頁面會以最有效的方式重新加載，也就是說頁面會從瀏覽器的緩存中重新加載。若要強制從服務器重新加載，則要傳入參數true。

location.reload();//重新加載（有可能從緩存中加載）
location.reload(true);//重新加載（從服務器重新加載）

最好將reload()放置在代碼的最後一行。

navigator對象

檢測插件
註冊處理程序

screen對象

包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等。

history對象

保存這用戶上網的歷史記錄，從窗口打開的那一刻算起。
使用go方法可以在用戶的歷史記錄中任意跳轉。它接收一個蠶食。負數表示向後跳轉，正數表示向前跳轉。

history.go(-1);//後退一頁
history.go(2);//前進兩頁
history.go("wrox.com");//跳轉到最近的wrox.com頁面
history.back();//後退一頁
history.forward();//前進一頁
history.length;//保存這所有歷史記錄的數量，爲0時，表示用戶打開後的第一個頁面