JavaScript window對象

概述

JavaScript的所有對象都存在于一個運行環(huán)境之中，這個運行環(huán)境本身也是對象，稱為“頂層對象”。這就是說，JavaScript的所有對象，都是“頂層對象”的下屬。不同的運行環(huán)境有不同的“頂層對象”，在瀏覽器環(huán)境中，這個頂層對象就是window對象（w為小寫）。

所有瀏覽器環(huán)境的全局變量，都是window對象的屬性。

var a = 1;
window.a // 1

可以簡單理解成，window就是指當前的瀏覽器窗口。

window對象的屬性

window.name屬性

window.name屬性用于設置當前瀏覽器窗口的名字。它有一個特點，就是瀏覽器刷新后，該屬性保持不變。所以，可以把值存放在該屬性內，然后跨頁面、甚至跨域名使用。當然，這個值有可能被其他網(wǎng)站的頁面改寫。

window.name = "Hello World!";
console.log(window.name);

各個瀏覽器對這個值的儲存容量有所不同，但是一般來說，可以高達幾MB。

該屬性只能保存字符串，且當瀏覽器窗口關閉后，所保存的值就會消失。因此局限性比較大，但是與iFrame窗口通信時，非常有用。

window.innerHeight屬性，window.innerWidth屬性

這兩個屬性返回網(wǎng)頁的CSS布局占據(jù)的瀏覽器窗口的高度和寬度，單位為像素。很顯然，當用戶放大網(wǎng)頁的時候（比如將網(wǎng)頁從100%的大小放大為200%），這兩個屬性會變小。

注意，這兩個屬性值包括滾動條的高度和寬度。

window.pageXOffset屬性，window.pageYOffset屬性

window.pageXOffset屬性返回頁面的水平滾動距離，window.pageYOffset屬性返回頁面的垂直滾動距離。這兩個屬性的單位為像素。

iframe元素

window.frames返回一個類似數(shù)組的對象，成員為頁面內的所有框架，包括frame元素和iframe元素。需要注意的是，window.frames的每個成員對應的是框架內的窗口（即框架的window對象），獲取每個框架的DOM樹，需要使用window.frames[0].document。

var iframe = window.getElementsByTagName("iframe")[0];
var iframe_title = iframe.contentWindow.title;

上面代碼用于獲取框架頁面的標題。

iframe元素遵守同源政策，只有當父頁面與框架頁面來自同一個域名，兩者之間才可以用腳本通信，否則只有使用window.postMessage方法。

在iframe框架內部，使用window.parent指向父頁面。

Navigator對象

Window對象的Navigator屬性，指向一個包含瀏覽器相關信息的對象。

（1）Navigator.userAgent屬性

Navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來標示瀏覽器的種類。下面是Chrome瀏覽器的User-Agent。

navigator.userAgent
// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36"

通過userAgent屬性識別瀏覽器，不是一個好辦法。因為必須考慮所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且無法保證未來的適用性，更何況各種上網(wǎng)設備層出不窮，難以窮盡。所以，現(xiàn)在一般不再識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當前瀏覽器是否支持要用到的JavaScript功能。

不過，通過userAgent可以大致準確地識別手機瀏覽器，方法就是測試是否包含“mobi”字符串。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
    // 手機瀏覽器
} else {
    // 非手機瀏覽器
}

如果想要識別所有移動設備的瀏覽器，可以測試更多的特征字符串。

/mobi|android|touch|mini/i.test(ua)

（2）navigator.plugins屬性

navigator.plugins屬性返回一個類似數(shù)組的對象，成員是瀏覽器安裝的插件，比如Flash、ActiveX等。

screen對象

screen對象包含了顯示設備的信息。

// 顯示設備的高度，單位為像素
screen.height
// 1920

// 顯示設備的寬度，單位為像素
screen.width
// 1080

一般使用以上兩個屬性，了解設備的分辨率。上面代碼顯示，某設備的分辨率是1920x1080。

除非調整顯示器的分辨率，否則這兩個值可以看作常量，不會發(fā)生變化。顯示器的分辨率與瀏覽器設置無關，縮放網(wǎng)頁并不會改變分辨率。

下面是根據(jù)屏幕分辨率，將用戶導向不同網(wǎng)頁的代碼。

if ((screen.width<=800) && (screen.height<=600)) {
    window.location.replace('small.html');
} else {
    window.location.replace('wide.html');
}

window對象的方法

URL的編碼/解碼方法

JavaScript提供四個URL的編碼/解碼方法。

• decodeURI()
• decodeURIComponent()
• encodeURI()
• encodeURIComponent()

window.getComputedStyle方法

getComputedStyle方法接受一個HTML元素作為參數(shù)，返回一個包含該HTML元素的最終樣式信息的對象。詳見《DOM》一章的CSS章節(jié)。

window.matchMedia方法

window.matchMedia方法用來檢查CSS的mediaQuery語句。詳見《DOM》一章的CSS章節(jié)。

window對象的事件

window.onerror

瀏覽器腳本發(fā)生錯誤時，會觸發(fā)window對象的error事件。我們可以通過window.onerror屬性對該事件指定回調函數(shù)。

window.onerror = function (message, filename, lineno, colno, error) {
    console.log("出錯了！--> %s", error.stack);
};

error事件的回調函數(shù)，一共可以有五個參數(shù)，它們的含義依次如下。

• 出錯信息
• 出錯腳本的網(wǎng)址
• 行號
• 列號
• 錯誤對象

老式瀏覽器只支持前三個參數(shù)。

需要注意的是，如果腳本網(wǎng)址與網(wǎng)頁網(wǎng)址不在同一個域（比如使用了CDN），瀏覽器根本不會提供詳細的出錯信息，只會提示出錯，錯誤類型是“Script error.”，行號為0，其他信息都沒有。這是瀏覽器防止向外部腳本泄漏信息。一個解決方法是在腳本所在的服務器，設置Access-Control-Allow-Origin的HTTP頭信息。

Access-Control-Allow-Origin:*

然后，在網(wǎng)頁的script標簽中設置crossorigin屬性。

<script crossorigin="anonymous" src="https://atts.w3cschool.cn/attachments/image/cimg/file.js"></script>

上面代碼的crossorigin="anonymous"表示，讀取文件不需要身份信息，即不需要cookie和HTTP認證信息。如果設為crossorigin="use-credentials"，就表示瀏覽器會上傳cookie和HTTP認證信息，同時還需要服務器端打開HTTP頭信息Access-Control-Allow-Credentials。

并不是所有的錯誤，都會觸發(fā)JavaScript的error事件（即讓JavaScript報錯），只限于以下三類事件。

• JavaScript語言錯誤
• JavaScript腳本文件不存在
• 圖像文件不存在

以下兩類事件不會觸發(fā)JavaScript的error事件。

• CSS文件不存在
• iframe文件不存在

alert()，prompt()，confirm()

alert()、prompt()、confirm()都是瀏覽器用來與用戶互動的方法。它們會彈出不同的對話框，要求用戶做出回應。

需要注意的是，alert()、prompt()、confirm()這三個方法彈出的對話框，都是瀏覽器統(tǒng)一規(guī)定的式樣，是無法定制的。

alert方法彈出的對話框，只有一個“確定”按鈕，往往用來通知用戶某些信息。

// 格式
alert(message);

// 實例
alert("Hello World");

用戶只有點擊“確定”按鈕，對話框才會消失。在對話框彈出期間，瀏覽器窗口處于凍結狀態(tài)，如果不點“確定”按鈕，用戶什么也干不了。

prompt方法彈出的對話框，在提示文字的下方，還有一個輸入框，要求用戶輸入信息，并有“確定”和“取消”兩個按鈕。它往往用來獲取用戶輸入的數(shù)據(jù)。

// 格式
var result = prompt(text[, default]);

// 實例
var result = prompt('您的年齡？', 25)

上面代碼會跳出一個對話框，文字提示為“您的年齡？”，要求用戶在對話框中輸入自己的年齡（默認顯示25）。

prompt方法的返回值是一個字符串（有可能為空）或者null，具體分成三種情況。

1. 用戶輸入信息，并點擊“確定”，則用戶輸入的信息就是返回值。
2. 用戶沒有輸入信息，直接點擊“確定”，則輸入框的默認值就是返回值。
3. 用戶點擊了“取消”（或者按了Escape按鈕），則返回值是null。

prompt方法的第二個參數(shù)是可選的，但是如果不提供的話，IE瀏覽器會在輸入框中顯示undefined。因此，最好總是提供第二個參數(shù)，作為輸入框的默認值。

confirm方法彈出的對話框，除了提示信息之外，只有“確定”和“取消”兩個按鈕，往往用來征詢用戶的意見。

// 格式
var result = confirm(message);

// 實例
var result = confirm("你最近好嗎？");

上面代碼彈出一個對話框，上面只有一行文字“你最近好嗎？”，用戶選擇點擊“確定”或“取消”。

confirm方法返回一個布爾值，如果用戶點擊“確定”，則返回true；如果用戶點擊“取消”，則返回false。

參考鏈接

• Karl Dubost, User-Agent detection, history and checklist
• Conrad Irwin, JS stacktraces. The good, the bad, and the ugly
• Daniel Lee, How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox)