BOM的核心對象是windows,他表示瀏覽器的一個實例。在瀏覽器中，window對象具有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個接口，又是ECMAScript規定的Global對象。
本文主要介紹4個BOM對象：
- window
- location
- navigator
- screen
- history
1. window 對象
1.1 全局作用域
由於window對象同時是ECMAScript中的Global對象，因此所有在全局作用域中聲明的變量、函數都會變成window對象的屬性和方法。
1.2 窗口關係及框架
如果頁面包含框架，則每個框架都擁有自己的window對象，並且保存在frames集合中。
由於HTML5已經不支持 frame 標籤，再此不對框架中的window對象進行深入的討論。
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 窗口位置
無法再跨瀏覽器的條件下取得窗口的左邊和上邊的精確座標值。但可以通過moveTo()和moveBy()有可能將窗口精確移動到同一個新位置。
window.moveTO(0,0); // 移動到左上角
window.moveTo(100, 100); // 移動到(100,100)
window.moveBy(0, 100); // 向下移動100px
window.moveBy(-50, 0); // 向左移動50px
1.4 window中的幾個重要函數
-
超時調用 setTimeout()
-
間歇調用
setInterval() -
window.open()
-
調整窗口大小，絕對大小：window.resizeTo()
-
調整窗口大小，相對大小：resizeBy()
-
altert()
-
confirm()
-
prompt()
2. location 對象
location對象提供了當前窗口中加載的文檔有關的信息，還提供了一些導航功能。location對象既是window對象的屬性，也是document對象的屬性。window.location === document.location // true。
2.1 對象屬性
- hash
- host
- hostname
- href
- pathname
- port: url中指定的端口，若url中不包含端口，則返回空字符串
- protocal: “http:”、“https”
- search: 返回url的查詢字符串，這個字符串以問號開頭
2.2 位置操作
可以通過location.assign()傳遞一個url來打開新的url，並且瀏覽器的歷史記錄中會生成一條記錄。還可以通過修改location的屬性來改變url。
location.assign("http://www.wrox.com")
window.location = "http://www.wrox.com"
location.href = "http://www.wrox.com"
location.hash = '#section1; // 在上面的基礎上，url修改爲http://www.wrox.com#section1'
注：每次修改location的屬性（hash除外），頁面都會以新URL重新加載。
上述方式修改URL後，瀏覽器的歷史記錄中就會生成一條新的記錄。
location.replace()接受一個參數url，導航到相應的頁面。雖然會導致瀏覽器的位置發生變化，但不會再歷史記錄中生成新記錄。在調用該方法後，用戶不能回到前一個頁面。
3. navigator 對象
- navigator對象用來識別客戶端瀏覽器。
- 非IE瀏覽器中，可以使用navigator.plugins來識別插件。
- 使用
navigator.registerContentHandler()和navigator.registerProtocalHandler()來註冊處理程序。
4. screen 對象
screen對象基本上只用來表名客戶端的能力，其中包括瀏覽器窗口外部的顯示器的信息。
每個瀏覽器中的screen對象都包含不同的屬性。
5. history 對象
history對象中保存着用戶上網的歷史記錄。由於安全原因，通過代碼無法獲取用戶瀏覽過的URL。
使用go()方法可以在歷史記錄中任意跳轉。方法接受一個參數，當參數爲數字時，表示向後或者向前跳轉的頁面樹的一個整數值。負數表示向後跳轉（類似瀏覽器“後退”按鈕），正數表示向前跳轉（類似瀏覽器“前進”按鈕）。
history.go(-1);
history.go(1);
當參數爲字符串時，瀏覽器會跳轉到歷史記錄中包含該字符串的第一個位置。如果歷史記錄中不包含該字符串，則什麼也不做。
history.go("wrox.com")
history還提供了back() 和forward()簡寫後退和前進。
history.back() 等同於 history.go(-1)
history.forward() 等同於 history.go(1)
history還有一個length屬性保存着歷史記錄的數量。
if(history.length == 0) {
// 這是用戶打開窗口後的第一個頁面
}