理解JavaScript中的window物件

前言

每個JavaScript環境都有一個全域性物件（global object）。在全域性範圍內建立的任何變數實際上都是這個物件的屬性，而任何函數都是它的方法。在瀏覽器環境中，全域性物件是window物件，它代表了包含網頁的瀏覽器視窗。

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

• 瀏覽器物件模型（Browser Object Model）
• 獲取瀏覽器資訊
• 獲取並使用瀏覽器history物件
• 建立並控制瀏覽器視窗
• 獲取螢幕尺寸以及顯示細節

瀏覽器物件模型

瀏覽器物件模型（簡稱BOM）是一個屬性和方法的集合，包含了關於瀏覽器和計算機螢幕的資訊。比如說，我們可以找出哪個瀏覽器正在被用來瀏覽一個頁面，儘管這種辦法不可靠。我們還可以找出它被瀏覽的螢幕尺寸，以及在當前頁面之前已經存取過哪些頁面。它還可以用於建立彈出式視窗這種相當可疑的做法，如果你喜歡惹惱你的使用者的話。

BOM沒有官方的標準，儘管所有主流瀏覽器都支援許多屬性和方法，但這已經成為了一種事實上的標準。這些屬性和方法是通過window物件提供的，每一個瀏覽器視窗，tab頁，彈窗，frame以及iframe都具有window物件。

瀏覽器環境

請記住，JavaScript可以在不同的環境上執行。BOM只在瀏覽器環境中有意義。這意味著其他環境可能沒有window物件，儘管他們仍有全域性物件。比如說，Node.js擁有一個稱為global的物件。

如果你不知道全域性物件的名稱，你可以在全域性作用域中使用關鍵字this來參照全域性物件。下面的程式碼提供了一種將變數global賦值給全域性物件的快捷方式：

const global = this;

深入全域性變數

全域性變數是不使用const、let或var關鍵字建立的變數。全域性變數可以在整個程式中進行存取。

全域性變數是全域性物件的屬性。在瀏覽器環境中，全域性物件就是window物件。這意味著任何建立的全域性變數都是window物件的屬性，可以從如下範例中看出：

x = 6;  // 建立的全域性變數
>> 6
window.x // 同一個變數可以作為window物件的一個屬性被存取
>> 6
// window.x === x
>> true

通常情況下，你應該在不使用window物件的情況下參照全域性變數。這樣可以減少字元輸入，並且你的程式碼在不同的環境中也更容易移植。如果你需要檢查一個全域性變數是否已經被定義，則是一個例外。比如說，如果x沒有被定義，下面的程式碼將會丟擲ReferenceError錯誤：

if (x) {
    // do something
}

然而，如果變數作為window物件的屬性進行存取，那麼程式碼仍然可以正常執行，window.x會直接返回false，意味著程式碼塊將不會被執行：

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

有些函數比如說parseInt()和isNaN() ，就是全域性物件的方法。在瀏覽器環境中，它們就是window物件的方法。與變數一樣，習慣上省略通過window物件而直接存取它們。

對話方塊

在瀏覽器中，有三個函數用來生成對話方塊：alert()，confirm()以及prompt()。這些都不是ECMAScript標準的一部分，儘管所有主流瀏覽器都支援它們作為window物件的方法。

Alert Dialog

window.alert()會暫停程式的執行，並在對話方塊中顯示訊息。訊息被作為引數提供給方法，方法總是返回undefined：

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

Confirm dialog

window.confirm()方法會停止程式的執行，並顯示一個確認對話方塊。展示作為引數提供的資訊，並給出確定或取消的選項。如果使用者點選確定，則返回布林值true，如果使用者點選取消，則返回布林值false：

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

Prompt dialog

window.prompt() 方法會停止程式的執行，並顯示一個對話方塊。展示作為引數提供的資訊，以及一個允許使用者輸入文字的輸入欄位。當用戶點選確定時，該文字會作為字串進行返回。如果使用者點選取消時，將會返回null：

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

謹慎使用原生對話方塊

值得再次強調的是，這些方法會在程式執行過程中讓程式停止執行。這意味著在方法被呼叫的時刻，一切都將停止處理，直到使用者點選確認或者取消。如果程式需要同時處理其他東西，或者程式在等待回撥函數，那麼這種方式就會造成問題。

在一些場合，這種功能因具備一些優勢從而可以使用。比如說，window.confirm()對話方塊可以被用來當做最終確認，檢查使用者是否想要刪除資源。這將阻止程式繼續進行並阻止刪除資源，直到使用者來決定如何處理。

還值得注意的是，大多數瀏覽器允許使用者禁用任意重複出現的對話方塊，這意味著該功能是不可靠的。

瀏覽器資訊

window物件有一系列的屬性和方法，這些屬性和方法提供了有關使用者瀏覽器的資訊。

Navigator物件

window物件有一個屬性叫做navigator，該屬性返回Navigator物件的參照。Navigator物件包含有關正在使用的瀏覽器的資訊。上面的userAgent屬性將會返回有關正在使用的瀏覽器和作業系統的資訊。比如說，如果執行下面的程式碼，它將顯示我正在使用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已經從官方標準中廢棄，但是它仍然在所有主流瀏覽器中得到很好的支援。

URL

window.location是一個物件，該物件包含有關當前頁面URL的資訊。它包含一些屬性，提供關於URL的不同片段的資訊。

href屬性將完整的URL作為字串進行返回：

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

該屬性（以及本節其他大多數屬性）是可讀/可寫屬性，這意味著可以通過賦值被更改。如果完成賦值操作，當前頁面將會使用新的屬性值進行重新載入。比如說，輸入下面的程式碼到瀏覽器的控制檯中，瀏覽器將會重定向到指定頁面：

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

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

window.location.protocol
>> "https:"

host屬性返回一個描述當前URL的域名以及埠號的字串。如果使用的預設埠號80，那麼埠號通常會被省略：

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

hostname屬性返回一個描述當前URL域名的字串：

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

port屬性返回一個描述埠號的字串，如果埠沒有顯式地在URL中宣告，它將返回空字串：

window.location.port
>> ""

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

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

search屬性返回一個以"?"開頭的字串，後面是查詢字串引數。如果沒有查詢字串引數，將會返回空字串：

window.location.search
>> ""

hash屬性返回一個以"#"開頭的字串，後面是片段識別符號。如果沒有片段識別符號，將返回空字串：

window.location.hash
>> ""

origin屬性返回一個字串，展示當前頁面來源的協定和域名。這個屬性是唯讀的，所以不能被改變：

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

window.location還具有以下方法：

• reload()方法可以用來強制重新載入當前頁面。如果傳遞引數true，會強制瀏覽器從伺服器端重新載入頁面，而不是使用快取的頁面。

• assign()方法可以用來從引數提供的URL中載入另一個資源。比如說：

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

• replace()方法與assign()方法作用幾乎相同，除了當前頁面不會儲存於瀏覽器歷史記錄中。所以使用者不能使用返回按鈕進行返回。

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

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

瀏覽器歷史

window.history屬性可用於存取當前瀏覽器對談中任何先前存取過的頁面的資訊。避免將其與新的HTML5 History API混淆。

window.history.length 屬性顯示在到達當前頁面之前已經存取了多少個頁面。

window.history.go()方法可以用於跳轉至指定頁面，0表示跳轉至當前頁面：

window.history.go(1); // 前進一個頁面
window.history.go(0); // 重新載入當前頁面
window.history.go(-1); // 後退一個頁面

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

控制視窗

可以使用window.open()方法開啟一個新的視窗。該方法接收將要開啟的頁面URL作為第一個引數，視窗的標題作為第二個引數，以及一系列屬性作為第三個引數。這也可以賦值給一個變數，這樣視窗就可以在以後的程式碼中被參照：

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

close()方法可用於關閉一個視窗，假設你有一個視窗參照：

popup.close();

也可以使用window.moveTo()方法移動視窗。該方法接收兩個引數，分別是視窗要移動到的螢幕的X軸和Y軸座標：

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

你可以使用window.resizeTo()方法來調整視窗大小。該方法接收兩個引數，用來指定調整後的視窗尺寸的寬度和高度：

window.resizeTo(600,400);

煩人的彈框

這些方法在很大程度上負責給JavaScript一個壞名聲，因為它們被用來建立煩人的彈出式視窗，這些視窗通常包含侵入性的廣告。從可用性的角度來看，調整或移動使用者視窗的大小也是一個壞主意。

許多瀏覽器阻止彈出式視窗，並在某些情況下不允許呼叫其中的一些方法。例如，如果有一個以上的標籤開啟，你就不能調整一個視窗的大小。你也不能移動或調整一個不是用window.open()建立的視窗的大小。

儘量少的使用這些方法是明智的，所以在使用它們之前要仔細考慮。幾乎總是會有一個更好的替代方案，而一個優秀程式設計師會努力找到它。

螢幕資訊

window.screen物件包含了關於瀏覽器所顯示的螢幕的資訊。你可以分別使用height和width屬性找出螢幕的高度和寬度，單位為畫素：

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

availHeight和availWidth可用於查詢螢幕的高度和寬度，其中不包括任何作業系統的選單：

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

colorDepth屬性可用於查詢使用者顯示器的顏色位深度，儘管除了收集使用者統計資料外，很少有這樣做的用例：

window.screen.colorDepth;
>> 24

更適用於行動平臺

螢幕物件對移動裝置有更多的用途。它還允許你做一些事情，如關閉裝置的螢幕，檢測其方向的變化或將其鎖定在一個特定的方向。

謹慎使用

上一節中所涉及的許多方法和屬性在過去被濫用於可疑的活動，如使用者代理嗅探，或檢測螢幕尺寸以決定是否顯示某些元素。這些做法現在已經被更好的做法所取代了，比如媒體查詢和特徵檢測。

檔案物件

每個window物件包含一個document物件。該物件有一系列的屬性和方法，用來處理已經載入到視窗的頁面。document物件包含一些值得關注的方法。

document.write()

write() 方法只是將一串文字寫到頁面上。如果頁面已經載入，它將徹底替換當前檔案：

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

這將用字串Hello, world!替換整個檔案。可以在字串中包含HTML，這將成為DOM樹的一部分。例如，下面這段程式碼將建立一個<h1>標籤節點和一個文字子節點：

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

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

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

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

總結

以上就是有關window物件的所有主要內容，感謝你的閱讀。如果讓你學到了知識，歡迎點贊收藏轉發~