前言

每個(gè)JavaScript環(huán)境都有一個(gè)全局對(duì)象（global object）。在全局范圍內(nèi)創(chuàng)建的任何變量實(shí)際上都是這個(gè)對(duì)象的屬性，而任何函數(shù)都是它的方法。在瀏覽器環(huán)境中，全局對(duì)象是window對(duì)象，它代表了包含網(wǎng)頁(yè)的瀏覽器窗口。

在這篇文章中，我們將介紹Window對(duì)象的一些重要用途：

• 瀏覽器對(duì)象模型（Browser Object Model）
• 獲取瀏覽器信息
• 獲取并使用瀏覽器history對(duì)象
• 創(chuàng)建并控制瀏覽器窗口
• 獲取屏幕尺寸以及顯示細(xì)節(jié)

瀏覽器對(duì)象模型

瀏覽器對(duì)象模型（簡(jiǎn)稱BOM）是一個(gè)屬性和方法的集合，包含了關(guān)于瀏覽器和計(jì)算機(jī)屏幕的信息。比如說(shuō)，我們可以找出哪個(gè)瀏覽器正在被用來(lái)瀏覽一個(gè)頁(yè)面，盡管這種辦法不可靠。我們還可以找出它被瀏覽的屏幕尺寸，以及在當(dāng)前頁(yè)面之前已經(jīng)訪問(wèn)過(guò)哪些頁(yè)面。它還可以用于創(chuàng)建彈出式窗口這種相當(dāng)可疑的做法，如果你喜歡惹惱你的用戶的話。

BOM沒(méi)有官方的標(biāo)準(zhǔn)，盡管所有主流瀏覽器都支持許多屬性和方法，但這已經(jīng)成為了一種事實(shí)上的標(biāo)準(zhǔn)。這些屬性和方法是通過(guò)window對(duì)象提供的，每一個(gè)瀏覽器窗口，tab頁(yè)，彈窗，frame以及iframe都具有window對(duì)象。

瀏覽器環(huán)境

請(qǐng)記住，JavaScript可以在不同的環(huán)境上運(yùn)行。BOM只在瀏覽器環(huán)境中有意義。這意味著其他環(huán)境可能沒(méi)有window對(duì)象，盡管他們?nèi)杂腥謱?duì)象。比如說(shuō)，Node.js擁有一個(gè)稱為global的對(duì)象。

如果你不知道全局對(duì)象的名稱，你可以在全局作用域中使用關(guān)鍵字this來(lái)引用全局對(duì)象。下面的代碼提供了一種將變量global賦值給全局對(duì)象的快捷方式：

const global = this;

深入全局變量

全局變量是不使用const、let或var關(guān)鍵字創(chuàng)建的變量。全局變量可以在整個(gè)程序中進(jìn)行訪問(wèn)。

全局變量是全局對(duì)象的屬性。在瀏覽器環(huán)境中，全局對(duì)象就是window對(duì)象。這意味著任何創(chuàng)建的全局變量都是window對(duì)象的屬性，可以從如下示例中看出：

x = 6;  // 創(chuàng)建的全局變量
>> 6
window.x // 同一個(gè)變量可以作為window對(duì)象的一個(gè)屬性被訪問(wèn)
>> 6
// window.x === x
>> true

通常情況下，你應(yīng)該在不使用window對(duì)象的情況下引用全局變量。這樣可以減少字符輸入，并且你的代碼在不同的環(huán)境中也更容易移植。如果你需要檢查一個(gè)全局變量是否已經(jīng)被定義，則是一個(gè)例外。比如說(shuō)，如果x沒(méi)有被定義，下面的代碼將會(huì)拋出ReferenceError錯(cuò)誤：

if (x) {
    // do something
}

然而，如果變量作為window對(duì)象的屬性進(jìn)行訪問(wèn)，那么代碼仍然可以正常運(yùn)行，window.x會(huì)直接返回false，意味著代碼塊將不會(huì)被執(zhí)行：

if (window.x) {
    // do something
}

有些函數(shù)比如說(shuō)parseInt()和isNaN() ，就是全局對(duì)象的方法。在瀏覽器環(huán)境中，它們就是window對(duì)象的方法。與變量一樣，習(xí)慣上省略通過(guò)window對(duì)象而直接訪問(wèn)它們。

對(duì)話框

在瀏覽器中，有三個(gè)函數(shù)用來(lái)生成對(duì)話框：alert()，confirm()以及prompt()。這些都不是ECMAScript標(biāo)準(zhǔn)的一部分，盡管所有主流瀏覽器都支持它們作為window對(duì)象的方法。

Alert Dialog

window.alert()會(huì)暫停程序的執(zhí)行，并在對(duì)話框中顯示消息。消息被作為參數(shù)提供給方法，方法總是返回undefined：

window.alert('Hello');
>> undefined

Confirm dialog

window.confirm()方法會(huì)停止程序的執(zhí)行，并顯示一個(gè)確認(rèn)對(duì)話框。展示作為參數(shù)提供的信息，并給出確定或取消的選項(xiàng)。如果用戶點(diǎn)擊確定，則返回布爾值true，如果用戶點(diǎn)擊取消，則返回布爾值false：

window.confirm('Do you wish to continue?');
>> undefined

Prompt dialog

window.prompt() 方法會(huì)停止程序的執(zhí)行，并顯示一個(gè)對(duì)話框。展示作為參數(shù)提供的信息，以及一個(gè)允許用戶輸入文本的輸入字段。當(dāng)用戶點(diǎn)擊確定時(shí)，該文本會(huì)作為字符串進(jìn)行返回。如果用戶點(diǎn)擊取消時(shí)，將會(huì)返回null：

window.prompt('Please enter your name:');

謹(jǐn)慎使用原生對(duì)話框

值得再次強(qiáng)調(diào)的是，這些方法會(huì)在程序執(zhí)行過(guò)程中讓程序停止執(zhí)行。這意味著在方法被調(diào)用的時(shí)刻，一切都將停止處理，直到用戶點(diǎn)擊確認(rèn)或者取消。如果程序需要同時(shí)處理其他東西，或者程序在等待回調(diào)函數(shù)，那么這種方式就會(huì)造成問(wèn)題。

在一些場(chǎng)合，這種功能因具備一些優(yōu)勢(shì)從而可以使用。比如說(shuō)，window.confirm()對(duì)話框可以被用來(lái)當(dāng)做最終確認(rèn)，檢查用戶是否想要?jiǎng)h除資源。這將阻止程序繼續(xù)進(jìn)行并阻止刪除資源，直到用戶來(lái)決定如何處理。

還值得注意的是，大多數(shù)瀏覽器允許用戶禁用任意重復(fù)出現(xiàn)的對(duì)話框，這意味著該功能是不可靠的。

瀏覽器信息

window對(duì)象有一系列的屬性和方法，這些屬性和方法提供了有關(guān)用戶瀏覽器的信息。

Navigator對(duì)象

window對(duì)象有一個(gè)屬性叫做navigator，該屬性返回Navigator對(duì)象的引用。Navigator對(duì)象包含有關(guān)正在使用的瀏覽器的信息。上面的userAgent屬性將會(huì)返回有關(guān)正在使用的瀏覽器和操作系統(tǒng)的信息。比如說(shuō)，如果運(yùn)行下面的代碼，它將顯示我正在使用Mac OS上的Safari 10版本：

window.navigator.userAgent
>>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4.8"

不過(guò)，不要依賴這些信息，因?yàn)橛脩艨梢孕薷倪@些信息，從而偽裝成其他瀏覽器。對(duì)返回的字符串也很難有任何意義，因?yàn)樵谀撤N程度上，所有的瀏覽器都會(huì)假裝成其他瀏覽器。

比如說(shuō)，每個(gè)瀏覽器都會(huì)在其自身的userAgent屬性上包含Mozilla字符串，因?yàn)檫z留的Netscape兼容性的原因。userAgent已經(jīng)從官方標(biāo)準(zhǔn)中廢棄，但是它仍然在所有主流瀏覽器中得到很好的支持。

URL

window.location是一個(gè)對(duì)象，該對(duì)象包含有關(guān)當(dāng)前頁(yè)面URL的信息。它包含一些屬性，提供關(guān)于URL的不同片段的信息。

href屬性將完整的URL作為字符串進(jìn)行返回：

window.location.href
>> "<https://www.sitepoint.com/javascript-window-object/>"

該屬性（以及本節(jié)其他大多數(shù)屬性）是可讀/可寫屬性，這意味著可以通過(guò)賦值被更改。如果完成賦值操作，當(dāng)前頁(yè)面將會(huì)使用新的屬性值進(jìn)行重新加載。比如說(shuō)，輸入下面的代碼到瀏覽器的控制臺(tái)中，瀏覽器將會(huì)重定向到指定頁(yè)面：

window.location.href = '<https://www.sitepoint.com/>'
>> "<https://www.sitepoint.com/>"

protocol屬性返回一個(gè)描述所使用的協(xié)議（比如http,https,pop2,ftp等等）的字符串。注意字符串的末尾有冒號(hào)：

window.location.protocol
>> "https:"

host屬性返回一個(gè)描述當(dāng)前URL的域名以及端口號(hào)的字符串。如果使用的默認(rèn)端口號(hào)80，那么端口號(hào)通常會(huì)被省略：

window.location.host
>> "www.sitepoint.com"

hostname屬性返回一個(gè)描述當(dāng)前URL域名的字符串：

window.location.hostname
>> "www.sitepoint.com"

port屬性返回一個(gè)描述端口號(hào)的字符串，如果端口沒(méi)有顯式地在URL中聲明，它將返回空字符串：

window.location.port
>> ""

pathname屬性返回域名后面的路徑字符串：

window.location.pathname
>> "/javascript-window-object/"

search屬性返回一個(gè)以"?"開頭的字符串，后面是查詢字符串參數(shù)。如果沒(méi)有查詢字符串參數(shù)，將會(huì)返回空字符串：

window.location.search
>> ""

hash屬性返回一個(gè)以"#"開頭的字符串，后面是片段標(biāo)識(shí)符。如果沒(méi)有片段標(biāo)識(shí)符，將返回空字符串：

window.location.hash
>> ""

origin屬性返回一個(gè)字符串，展示當(dāng)前頁(yè)面來(lái)源的協(xié)議和域名。這個(gè)屬性是只讀的，所以不能被改變：

window.location.origin
>> "<https://www.sitepoint.com>"

window.location還具有以下方法：

reload()方法可以用來(lái)強(qiáng)制重新加載當(dāng)前頁(yè)面。如果傳遞參數(shù)true，會(huì)強(qiáng)制瀏覽器從服務(wù)端重新加載頁(yè)面，而不是使用緩存的頁(yè)面。

assign()方法可以用來(lái)從參數(shù)提供的URL中加載另一個(gè)資源。比如說(shuō)：

window.location.assign('<https://www.sitepoint.com/>')

replace()方法與assign()方法作用幾乎相同，除了當(dāng)前頁(yè)面不會(huì)存儲(chǔ)于瀏覽器歷史記錄中。所以用戶不能使用返回按鈕進(jìn)行返回。

toString()方法返回一個(gè)包含整個(gè)URL的字符串：

window.location.toString();
>> "<https://www.sitepoint.com/javascript/>"

瀏覽器歷史

window.history屬性可用于訪問(wèn)當(dāng)前瀏覽器會(huì)話中任何先前訪問(wèn)過(guò)的頁(yè)面的信息。避免將其與新的HTML5 History API混淆。

window.history.length 屬性顯示在到達(dá)當(dāng)前頁(yè)面之前已經(jīng)訪問(wèn)了多少個(gè)頁(yè)面。

window.history.go()方法可以用于跳轉(zhuǎn)至指定頁(yè)面，0表示跳轉(zhuǎn)至當(dāng)前頁(yè)面：

window.history.go(1); // 前進(jìn)一個(gè)頁(yè)面
window.history.go(0); // 重新加載當(dāng)前頁(yè)面
window.history.go(-1); // 后退一個(gè)頁(yè)面

還有window.history.forward()以及window.history.back() 方法，可分別用于前進(jìn)或后退一個(gè)頁(yè)面，就好像使用了瀏覽器的前進(jìn)和后退按鈕。

控制窗口

可以使用window.open()方法打開一個(gè)新的窗口。該方法接收將要打開的頁(yè)面URL作為第一個(gè)參數(shù)，窗口的標(biāo)題作為第二個(gè)參數(shù)，以及一系列屬性作為第三個(gè)參數(shù)。這也可以賦值給一個(gè)變量，這樣窗口就可以在以后的代碼中被引用：

const popup = window.open('<https://sitepoint.com>','SitePoint','width=700,height=700,resizable=yes');

close()方法可用于關(guān)閉一個(gè)窗口，假設(shè)你有一個(gè)窗口引用：

popup.close();

也可以使用window.moveTo()方法移動(dòng)窗口。該方法接收兩個(gè)參數(shù)，分別是窗口要移動(dòng)到的屏幕的X軸和Y軸坐標(biāo)：

window.moveTo(0,0); 
// 移動(dòng)窗口到屏幕的左上角

你可以使用window.resizeTo()方法來(lái)調(diào)整窗口大小。該方法接收兩個(gè)參數(shù)，用來(lái)指定調(diào)整后的窗口尺寸的寬度和高度：

window.resizeTo(600,400);

煩人的彈框

這些方法在很大程度上負(fù)責(zé)給JavaScript一個(gè)壞名聲，因?yàn)樗鼈儽挥脕?lái)創(chuàng)建煩人的彈出式窗口，這些窗口通常包含侵入性的廣告。從可用性的角度來(lái)看，調(diào)整或移動(dòng)用戶窗口的大小也是一個(gè)壞主意。

許多瀏覽器阻止彈出式窗口，并在某些情況下不允許調(diào)用其中的一些方法。例如，如果有一個(gè)以上的標(biāo)簽打開，你就不能調(diào)整一個(gè)窗口的大小。你也不能移動(dòng)或調(diào)整一個(gè)不是用window.open()創(chuàng)建的窗口的大小。

盡量少的使用這些方法是明智的，所以在使用它們之前要仔細(xì)考慮。幾乎總是會(huì)有一個(gè)更好的替代方案，而一個(gè)優(yōu)秀程序員會(huì)努力找到它。

屏幕信息

window.screen對(duì)象包含了關(guān)于瀏覽器所顯示的屏幕的信息。你可以分別使用height和width屬性找出屏幕的高度和寬度，單位為像素：

window.screen.height
>> 1024
window.screen.width
>> 1280

availHeight和availWidth可用于查找屏幕的高度和寬度，其中不包括任何操作系統(tǒng)的菜單：

window.screen.availWidth
>> 1280
window.screen.availHeight
>> 995

colorDepth屬性可用于查找用戶顯示器的顏色位深度，盡管除了收集用戶統(tǒng)計(jì)數(shù)據(jù)外，很少有這樣做的用例：

window.screen.colorDepth;
>> 24

更適用于移動(dòng)平臺(tái)

屏幕對(duì)象對(duì)移動(dòng)設(shè)備有更多的用途。它還允許你做一些事情，如關(guān)閉設(shè)備的屏幕，檢測(cè)其方向的變化或?qū)⑵滏i定在一個(gè)特定的方向。

謹(jǐn)慎使用

上一節(jié)中所涉及的許多方法和屬性在過(guò)去被濫用于可疑的活動(dòng)，如用戶代理嗅探，或檢測(cè)屏幕尺寸以決定是否顯示某些元素。這些做法現(xiàn)在已經(jīng)被更好的做法所取代了，比如媒體查詢和特征檢測(cè)。

文檔對(duì)象

每個(gè)window對(duì)象包含一個(gè)document對(duì)象。該對(duì)象有一系列的屬性和方法，用來(lái)處理已經(jīng)加載到窗口的頁(yè)面。document對(duì)象包含一些值得關(guān)注的方法。

document.write()

write() 方法只是將一串文本寫到頁(yè)面上。如果頁(yè)面已經(jīng)加載，它將徹底替換當(dāng)前文檔：

document.write('Hello, world!');

這將用字符串Hello, world!替換整個(gè)文檔?？梢栽谧址邪琀TML，這將成為DOM樹的一部分。例如，下面這段代碼將創(chuàng)建一個(gè)<h1>標(biāo)簽節(jié)點(diǎn)和一個(gè)文本子節(jié)點(diǎn)：

document.write('<h1>Hello, world!</h1>');

document.write()方法也可以在文檔中的<script>標(biāo)簽內(nèi)使用，用于將字符串注入到標(biāo)記中。這不會(huì)覆蓋頁(yè)面上的其他HTML。下面的例子將把文本 "Hello, world!"放在<h1>標(biāo)簽內(nèi)，頁(yè)面的其他部分將正常顯示：

<h1>
    <script>document.write("Hello, world!")</script>
</h1>

document.write()的使用是非常不受歡迎的，因?yàn)樗荒芡ㄟ^(guò)在HTML文檔中混合JavaScript來(lái)進(jìn)行使用。仍然有一些極其罕見的合法用途，但一個(gè)出色的程序員幾乎不需要使用它。

總結(jié)

以上就是有關(guān)window對(duì)象的所有主要內(nèi)容，感謝你的閱讀。

到此這篇關(guān)于理解JavaScript中的window對(duì)象的文章就介紹到這了,更多相關(guān)js window對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論