前言

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

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

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

瀏覽器對象模型

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

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

瀏覽器環(huán)境

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

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

const global = this;

深入全局變量

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

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

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

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

if (x) {
    // do something
}

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

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

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

對話框

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

Alert Dialog

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

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

Confirm dialog

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

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

Prompt dialog

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

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

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

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

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

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

瀏覽器信息

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

Navigator對象

window對象有一個屬性叫做navigator，該屬性返回Navigator對象的引用。Navigator對象包含有關(guān)正在使用的瀏覽器的信息。上面的userAgent屬性將會返回有關(guān)正在使用的瀏覽器和操作系統(tǒng)的信息。比如說，如果運行下面的代碼，它將顯示我正在使用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"

不過，不要依賴這些信息，因為用戶可以修改這些信息，從而偽裝成其他瀏覽器。對返回的字符串也很難有任何意義，因為在某種程度上，所有的瀏覽器都會假裝成其他瀏覽器。

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

URL

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

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

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

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

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

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

window.location.protocol
>> "https:"

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

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

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

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

port屬性返回一個描述端口號的字符串，如果端口沒有顯式地在URL中聲明，它將返回空字符串：

window.location.port
>> ""

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

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

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

window.location.search
>> ""

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

window.location.hash
>> ""

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

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

window.location還具有以下方法：

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

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

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

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

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

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

瀏覽器歷史

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

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

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

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

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

控制窗口

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

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

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

popup.close();

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

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

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

window.resizeTo(600,400);

煩人的彈框

這些方法在很大程度上負(fù)責(zé)給JavaScript一個壞名聲，因為它們被用來創(chuàng)建煩人的彈出式窗口，這些窗口通常包含侵入性的廣告。從可用性的角度來看，調(diào)整或移動用戶窗口的大小也是一個壞主意。

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

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

屏幕信息

window.screen對象包含了關(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)計數(shù)據(jù)外，很少有這樣做的用例：

window.screen.colorDepth;
>> 24

更適用于移動平臺

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

謹(jǐn)慎使用

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

文檔對象

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

document.write()

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

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

這將用字符串Hello, world!替換整個文檔。可以在字符串中包含HTML，這將成為DOM樹的一部分。例如，下面這段代碼將創(chuàng)建一個<h1>標(biāo)簽節(jié)點和一個文本子節(jié)點：

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

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

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

document.write()的使用是非常不受歡迎的，因為它只能通過在HTML文檔中混合JavaScript來進(jìn)行使用。仍然有一些極其罕見的合法用途，但一個出色的程序員幾乎不需要使用它。

總結(jié)

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

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

最新評論