JS學習之瀏覽器對象(十一)

window

window對象有innerWidth和innerHeight屬性,可以獲取瀏覽器窗口的內部寬度和高度。內部寬高是指除去菜單欄、工具欄、邊框等佔位元素後,用於顯示網頁的淨寬高。

兼容性:IE<=8不支持。

對應的,還有一個outerWidth和outerHeight屬性,可以獲取瀏覽器窗口的整個寬高。

navigator

navigator對象表示瀏覽器的信息,最常用的屬性包括:

navigator.appName:瀏覽器名稱;
navigator.appVersion:瀏覽器版本;
navigator.language:瀏覽器設置的語言;
navigator.platform:操作系統類型;
navigator.userAgent:瀏覽器設定的User-Agent字符串。

正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性,直接用短路運算符||計算:

var width = window.innerWidth || document.body.clientWidth;

screen

screen對象表示屏幕的信息,常用的屬性有:

screen.width:屏幕寬度,以像素爲單位;
screen.height:屏幕高度,以像素爲單位;
screen.colorDepth:返回顏色位數,如8、16、24。

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()方法非常方便。

document

document對象表示當前頁面。由於HTML在瀏覽器中以DOM形式表示爲樹形結構,document對象就是整個DOM樹的根節點。

document的title屬性是從HTML文檔中的xxx讀取的,但是可以動態改變:

document對象提供的getElementById()和getElementsByTagName()可以按ID獲得一個DOM節點和按Tag名稱獲得一組DOM節點:

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代碼是允許的:

爲了解決這個問題,服務器在設置Cookie時可以使用httpOnly,設定了httpOnly的Cookie將不能被JavaScript讀取。這個行爲由瀏覽器實現,主流瀏覽器均支持httpOnly選項,IE從IE6 SP1開始支持。

爲了確保安全,服務器端在設置Cookie時,應該始終堅持使用httpOnly。

history

history對象保存了瀏覽器的歷史記錄,JavaScript可以調用history對象的back()或forward (),相當於用戶點擊了瀏覽器的“後退”或“前進”按鈕。

這個對象就放棄吧

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章