JavaScript window對象

概述

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

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

var a = 1;
window.a // 1

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

window對象的屬性

window.name屬性

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

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

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

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

window.innerHeight屬性，window.innerWidth屬性

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

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

window.pageXOffset屬性，window.pageYOffset屬性

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

iframe元素

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

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

上面代碼用于獲取框架頁面的標(biāo)題。

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

在iframe框架內(nèi)部，使用window.parent指向父頁面。

Navigator對象

Window對象的Navigator屬性，指向一個(gè)包含瀏覽器相關(guān)信息的對象。

（1）Navigator.userAgent屬性

Navigator.userAgent屬性返回瀏覽器的User-Agent字符串，用來標(biāo)示瀏覽器的種類。下面是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屬性識別瀏覽器，不是一個(gè)好辦法。因?yàn)楸仨毧紤]所有的情況（不同的瀏覽器，不同的版本），非常麻煩，而且無法保證未來的適用性，更何況各種上網(wǎng)設(shè)備層出不窮，難以窮盡。所以，現(xiàn)在一般不再識別瀏覽器了，而是使用“功能識別”方法，即逐一測試當(dāng)前瀏覽器是否支持要用到的JavaScript功能。

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

var ua = navigator.userAgent.toLowerCase();

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

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

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

（2）navigator.plugins屬性

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

screen對象

screen對象包含了顯示設(shè)備的信息。

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

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

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

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

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

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

window對象的方法

URL的編碼/解碼方法

JavaScript提供四個(gè)URL的編碼/解碼方法。

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

window.getComputedStyle方法

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

window.matchMedia方法

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

window對象的事件

window.onerror

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

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

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

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

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

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

Access-Control-Allow-Origin:*

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

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

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

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

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

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

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

alert()，prompt()，confirm()

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

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

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

// 格式
alert(message);

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

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

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

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

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

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

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

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

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

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

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

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

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

confirm方法返回一個(gè)布爾值，如果用戶點(diǎn)擊“確定”，則返回true；如果用戶點(diǎn)擊“取消”，則返回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)