JavaScript之瀏覽器物件範例程式碼詳解-js教程-PHP中文網

JavaScript可以取得瀏覽器提供的許多對象，並進行操作。以下透過本文為大家介紹JavaScript之瀏覽器物件的相關知識，一起來看看吧

JavaScript可以取得瀏覽器提供的許多對象，並進行操作。

window

window物件不但扮演全域作用域，而且表示瀏覽器視窗。

window物件有innerWidth和innerHeight屬性，可以取得瀏覽器視窗的內部寬度和高度。內部寬高是指除去功能表列、工具列、邊框等佔位元素後，用於顯示網頁的淨寬高。

相容性：IE<=8不支援。

// 可以调整浏览器窗口大小试试:
alert(&#39;window inner size: &#39; + window.innerWidth + &#39; x &#39; + window.innerHeight);

登入後複製

對應的，還有一個outerWidth和outerHeight屬性，可以取得瀏覽器視窗的整個寬高。

navigator

#navigator物件表示瀏覽器的訊息，最常用的屬性包括：

navigator.appName：瀏覽器名稱；
navigator.appVersion：瀏覽器版本;
navigator.language：瀏覽器設定的語言；
#navigator.platform：作業系統類型；
#navigator.userAgent：瀏覽器設定的User-Agent字串。

alert(&#39;appName = &#39; + navigator.appName + &#39;\n&#39; +
   &#39;appVersion = &#39; + navigator.appVersion + &#39;\n&#39; +
   &#39;language = &#39; + navigator.language + &#39;\n&#39; +
   &#39;platform = &#39; + navigator.platform + &#39;\n&#39; +
   &#39;userAgent = &#39; + 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(&#39;Screen size = &#39; + screen.width + &#39; x &#39; + screen.height);

登入後複製

location

#location物件表示目前頁面的URL資訊。例如，一個完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href取得。要取得URL各個部分的值，可以這麼寫：

location.protocol; // &#39;http&#39;
location.host; // &#39;www.example.com&#39;
location.port; // &#39;8080&#39;
location.pathname; // &#39;/path/index.html&#39;
location.search; // &#39;?a=1&b=2&#39;
location.hash; // &#39;TOP&#39;

登入後複製

要載入一個新頁面，可以呼叫location.assign()。如果要重新載入目前頁面，呼叫location.reload()方法非常方便。

if (confirm(&#39;重新加载当前页&#39; + location.href + &#39;?&#39;)) {
  location.reload();
} else {
  location.assign(&#39;/discuss&#39;); // 设置一个新的URL地址
}

登入後複製

document

document物件表示目前頁面。由於HTML在瀏覽器中以DOM形式表示為樹狀結構，document物件就是整個DOM樹的根節點。

document的title屬性是從HTML文件中的xxx讀取的，但是可以動態改變：

document.title = &#39;努力学习JavaScript!&#39;;

登入後複製

請觀察瀏覽器視窗標題的變化。

要尋找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(&#39;drink-menu&#39;);
var drinks = document.getElementsByTagName(&#39;dt&#39;);
var i, s, menu, drinks;

menu = document.getElementById(&#39;drink-menu&#39;);
menu.tagName; // &#39;DL&#39;

drinks = document.getElementsByTagName(&#39;dt&#39;);
s = &#39;提供的饮料有:&#39;;
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + &#39;,&#39;;
}
alert(s);

登入後複製

摩卡
熱摩卡咖啡
酸奶
北京老酸奶
果汁
鮮榨蘋果汁

# #document物件還有一個cookie屬性，可以取得目前頁面的Cookie。

Cookie是由伺服器傳送的key-value標示符。因為HTTP協定是無狀態的，但是伺服器要區分到底是哪個用戶發過來的請求，就可以用Cookie來區分。當一個使用者成功登入後，伺服器發送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字串)...，此後，瀏覽器造訪該網站時，會在請求頭附上這個Cookie，伺服器根據Cookie即可區分出用戶。

Cookie還可以儲存網站的一些設置，例如，頁面顯示的語言等等。

JavaScript可以透過document.cookie讀取到目前頁面的Cookie：

document.cookie; // &#39;v=123; remember=true; prefer=zh&#39;

登入後複製

由於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中文網其他相關文章！