瀏覽器對象 · 廖雪峰 JavaScript Python Git 教程

# 瀏覽器對象 JavaScript可以獲取瀏覽器提供的很多對象，并進行操作。 ## window `window`對象不但充當全局作用域，而且表示瀏覽器窗口。 `window`對象有`innerWidth`和`innerHeight`屬性，可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等占位元素后，用于顯示網頁的凈寬高。兼容性：IE<=8不支持。 ``` 'use strict'; // 可以調整瀏覽器窗口大小試試: alert('window inner size: ' + window.innerWidth + ' x ' + window.innerHeight); ``` 對應的，還有一個`outerWidth`和`outerHeight`屬性，可以獲取瀏覽器窗口的整個寬高。 ## navigator `navigator`對象表示瀏覽器的信息，最常用的屬性包括： * navigator.appName：瀏覽器名稱； * navigator.appVersion：瀏覽器版本； * navigator.language：瀏覽器設置的語言； * navigator.platform：操作系統類型； * navigator.userAgent：瀏覽器設定的`User-Agent`字符串。 ``` 'use strict'; alert('appName = ' + navigator.appName + '\n' + 'appVersion = ' + navigator.appVersion + '\n' + 'language = ' + navigator.language + '\n' + 'platform = ' + navigator.platform + '\n' + 'userAgent = ' + navigator.userAgent); ``` _請注意_，`navigator`的信息可以很容易地被用戶修改，所以JavaScript讀取的值不一定是正確的。很多初學者為了針對不同瀏覽器編寫不同的代碼，喜歡用`if`判斷瀏覽器版本，例如： ``` var width; if (getIEVersion(navigator.userAgent) < 9) { width = document.body.clientWidth; } else { width = window.innerWidth; } ``` 但這樣既可能判斷不準確，也很難維護代碼。正確的方法是充分利用JavaScript對不存在屬性返回`undefined`的特性，直接用短路運算符`||`計算： ``` var width = window.innerWidth || document.body.clientWidth; ``` ## screen `screen`對象表示屏幕的信息，常用的屬性有： * screen.width：屏幕寬度，以像素為單位； * screen.height：屏幕高度，以像素為單位； * screen.colorDepth：返回顏色位數，如8、16、24。 ``` 'use strict'; alert('Screen size = ' + screen.width + ' x ' + screen.height); ``` ## location `location`對象表示當前頁面的URL信息。例如，一個完整的URL： ``` http://www.example.com:8080/path/index.html?a=1&b=2#TOP ``` 可以用`location.href`獲取。要獲得URL各個部分的值，可以這么寫： ``` location.protocol; // 'http' location.host; // 'www.example.com' location.port; // '8080' location.pathname; // '/path/index.html' location.search; // '?a=1&b=2' location.hash; // 'TOP' ``` 要加載一個新頁面，可以調用`location.assign()`。如果要重新加載當前頁面，調用`location.reload()`方法非常方便。 ``` 'use strict'; if (confirm('重新加載當前頁' + location.href + '?')) { location.reload(); } else { location.assign('/discuss'); // 設置一個新的URL地址 } ``` ## document `document`對象表示當前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結構，`document`對象就是整個DOM樹的根節點。 `document`的`title`屬性是從HTML文檔中的`<title>xxx</title>`讀取的，但是可以動態改變： ``` 'use strict'; document.title = '努力學習JavaScript!'; ``` 請觀察瀏覽器窗口標題的變化。要查找DOM樹的某個節點，需要從`document`對象開始查找。最常用的查找是根據ID和Tag Name。我們先準備HTML數據： ``` <dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;"> <dt>摩卡</dt> <dd>熱摩卡咖啡</dd> <dt>酸奶</dt> <dd>北京老酸奶</dd> <dt>果汁</dt> <dd>鮮榨蘋果汁</dd> </dl> ``` 用`document`對象提供的`getElementById()`和`getElementsByTagName()`可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點： ``` 'use strict'; var menu = document.getElementById('drink-menu'); var drinks = document.getElementsByTagName('dt'); var i, s, menu, drinks; menu = document.getElementById('drink-menu'); menu.tagName; // 'DL' drinks = document.getElementsByTagName('dt'); s = '提供的飲料有:'; for (i=0; i<drinks.length; i++) { s = s + drinks[i].innerHTML + ','; } alert(s); ``` `document`對象還有一個`cookie`屬性，可以獲取當前頁面的Cookie。 Cookie是由服務器發送的key-value標示符。因為HTTP協議是無狀態的，但是服務器要區分到底是哪個用戶發過來的請求，就可以用Cookie來區分。當一個用戶成功登錄后，服務器發送一個Cookie給瀏覽器，例如`user=ABC123XYZ(加密的字符串)...`，此后，瀏覽器訪問該網站時，會在請求頭附上這個Cookie，服務器根據Cookie即可區分出用戶。 Cookie還可以存儲網站的一些設置，例如，頁面顯示的語言等等。 JavaScript可以通過`document.cookie`讀取到當前頁面的Cookie： ``` document.cookie; // 'v=123; remember=true; prefer=zh' ``` 由于JavaScript能讀取到頁面的Cookie，而用戶的登錄信息通常也存在Cookie中，這就造成了巨大的安全隱患，這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的： ```  <html> <head> <script src="http://www.foo.com/jquery.js"></script> </head> ... </html> ``` 如果引入的第三方的JavaScript中存在惡意代碼，則`www.foo.com`網站將直接獲取到`www.example.com`網站的用戶登錄信息。為了解決這個問題，服務器在設置Cookie時可以使用`httpOnly`，設定了`httpOnly`的Cookie將不能被JavaScript讀取。這個行為由瀏覽器實現，主流瀏覽器均支持`httpOnly`選項，IE從IE6 SP1開始支持。為了確保安全，服務器端在設置Cookie時，應該始終堅持使用`httpOnly`。 ## history `history`對象保存了瀏覽器的歷史記錄，JavaScript可以調用`history`對象的`back()`或`forward ()`，相當于用戶點擊了瀏覽器的“后退”或“前進”按鈕。這個對象屬于歷史遺留對象，對于現代Web頁面來說，由于大量使用AJAX和頁面交互，簡單粗暴地調用`history.back()`可能會讓用戶感到非常憤怒。新手開始設計Web頁面時喜歡在登錄頁登錄成功時調用`history.back()`，試圖回到登錄前的頁面。這是一種錯誤的方法。任何情況，你都不應該使用`history`這個對象了。