首頁 >web前端 >js教程 >JavaScript之瀏覽器物件範例程式碼詳解

JavaScript之瀏覽器物件範例程式碼詳解

怪我咯原創: 2017-07-07 15:11:171240瀏覽

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

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

window

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

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

相容性：IEa11b8ed1099b6a20c50be6e8c00f748fxxx6e916e0f7d1e588d4f442bf645aedb2f讀取的，但是可以動態改變：

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

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：JavaScript打字小遊戲程式碼範例下一篇：JavaScript打字小遊戲程式碼範例

看更多