BOM的核心對(duì)象是windows,他表示瀏覽器的一個(gè)實(shí)例。在瀏覽器中，window對(duì)象具有雙重角色，它既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口，又是ECMAScript規(guī)定的Global對(duì)象。
本文主要介紹4個(gè)BOM對(duì)象：
window
location
navigator
screen
history
1. window 對(duì)象
1.1 全局作用域
由于window對(duì)象同時(shí)是ECMAScript中的Global對(duì)象，因此所有在全局作用域中聲明的變量、函數(shù)都會(huì)變成window對(duì)象的屬性和方法。
1.2 窗口關(guān)系及框架
如果頁面包含框架，則每個(gè)框架都擁有自己的window對(duì)象，并且保存在frames集合中。
由于HTML5已經(jīng)不支持 frame 標(biāo)簽，再此不對(duì)框架中的window對(duì)象進(jìn)行深入的討論。
1.3 窗口大小
在不同的瀏覽器中，沒有統(tǒng)一的屬性能獲取到瀏覽器窗口的大小。但是可以通過一些方法獲取瀏覽器視口的大小。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n21" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">// 獲取瀏覽器視口大小
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;
}
}</pre>
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">window.moveTO(0,0); // 移動(dòng)到左上角
window.moveTo(100, 100); // 移動(dòng)到(100,100)
window.moveBy(0, 100); // 向下移動(dòng)100px
window.moveBy(-50, 0); // 向左移動(dòng)50px</pre>
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n95" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">if(history.length == 0) {
// 這是用戶打開窗口后的第一個(gè)頁面
}</pre>
history還有一個(gè)length屬性保存著歷史記錄的數(shù)量。
history.forward() 等同于 history.go(1)
history.back() 等同于 history.go(-1)
history還提供了back() 和forward()簡(jiǎn)寫后退和前進(jìn)。
history.go("wrox.com")
當(dāng)參數(shù)為字符串時(shí)，瀏覽器會(huì)跳轉(zhuǎn)到歷史記錄中包含該字符串的第一個(gè)位置。如果歷史記錄中不包含該字符串，則什么也不做。
history.go(1);
history.go(-1);
使用go()方法可以在歷史記錄中任意跳轉(zhuǎn)。方法接受一個(gè)參數(shù)，當(dāng)參數(shù)為數(shù)字時(shí)，表示向后或者向前跳轉(zhuǎn)的頁面樹的一個(gè)整數(shù)值。負(fù)數(shù)表示向后跳轉(zhuǎn)（類似瀏覽器“后退”按鈕），正數(shù)表示向前跳轉(zhuǎn)（類似瀏覽器“前進(jìn)”按鈕）。
history對(duì)象中保存著用戶上網(wǎng)的歷史記錄。由于安全原因，通過代碼無法獲取用戶瀏覽過的URL。
5. history 對(duì)象
每個(gè)瀏覽器中的screen對(duì)象都包含不同的屬性。
screen對(duì)象基本上只用來表名客戶端的能力，其中包括瀏覽器窗口外部的顯示器的信息。
4. screen 對(duì)象
navigator對(duì)象用來識(shí)別客戶端瀏覽器。
非IE瀏覽器中，可以使用navigator.plugins來識(shí)別插件。
使用
navigator.registerContentHandler()和navigator.registerProtocalHandler()來注冊(cè)處理程序。
3. navigator 對(duì)象
location.replace()接受一個(gè)參數(shù)url，導(dǎo)航到相應(yīng)的頁面。雖然會(huì)導(dǎo)致瀏覽器的位置發(fā)生變化，但不會(huì)再歷史記錄中生成新記錄。在調(diào)用該方法后，用戶不能回到前一個(gè)頁面。
上述方式修改URL后，瀏覽器的歷史記錄中就會(huì)生成一條新的記錄。
注：每次修改location的屬性（hash除外），頁面都會(huì)以新URL重新加載。
location.hash = '#section1; // 在上面的基礎(chǔ)上，url修改為http://www.wrox.com#section1'
location.
window.location = "http://www.wrox.com"
location.assign("http://www.wrox.com")
可以通過location.assign()傳遞一個(gè)url來打開新的url，并且瀏覽器的歷史記錄中會(huì)生成一條記錄。還可以通過修改location的屬性來改變url。
2.2 位置操作
hash
host
hostname
href
pathname
port: url中指定的端口，若url中不包含端口，則返回空字符串
protocal: "http:"、"https"
search: 返回url的查詢字符串，這個(gè)字符串以問號(hào)開頭
2.1 對(duì)象屬性
location對(duì)象提供了當(dāng)前窗口中加載的文檔有關(guān)的信息，還提供了一些導(dǎo)航功能。location對(duì)象既是window對(duì)象的屬性，也是document對(duì)象的屬性。window.location === document.location // true。
2. location 對(duì)象
超時(shí)調(diào)用 setTimeout()
間歇調(diào)用
setInterval()window.open()
調(diào)整窗口大小，絕對(duì)大?。簑indow.resizeTo()
調(diào)整窗口大小，相對(duì)大?。簉esizeBy()
altert()
confirm()
prompt()
1.4 window中的幾個(gè)重要函數(shù)
無法再跨瀏覽器的條件下取得窗口的左邊和上邊的精確坐標(biāo)值。但可以通過moveTo()和moveBy()有可能將窗口精確移動(dòng)到同一個(gè)新位置。
