JavaScript可以取得瀏覽器提供的許多對象，並進行操作。以下透過本文為大家介紹JavaScript之瀏覽器物件的相關知識，一起來看看吧
JavaScript可以取得瀏覽器提供的許多對象，並進行操作。
window
window物件不但扮演全域作用域，而且表示瀏覽器視窗。
window物件有innerWidth和innerHeight屬性，可以取得瀏覽器視窗的內部寬度和高度。內部寬高是指除去功能表列、工具列、邊框等佔位元素後，用於顯示網頁的淨寬高。
相容性：IE<=8不支援。
// 可以调整浏览器窗口大小试试:
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字串。
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。
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()方法非常方便。
if (confirm('重新加载当前页' + location.href + '?')) {
location.reload();
} else {
location.assign('/discuss'); // 设置一个新的URL地址
}登入後複製
document
document物件表示目前頁面。由於HTML在瀏覽器中以DOM形式表示為樹狀結構，document物件就是整個DOM樹的根節點。
document的title屬性是從HTML文件中的
xxx讀取的，但是可以動態改變：
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節點：
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程式碼是允許的：
<!-- 当前页面在wwwexample.com -->
<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這個物件了。
以上是JavaScript之瀏覽器物件範例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
