怎么理解Javascript中瀏覽器對象模型

本篇內容主要講解“怎么理解Javascript中瀏覽器對象模型”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么理解Javascript中瀏覽器對象模型”吧!

JavaScript Window - 瀏覽器對象模型

瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器"對話"。

瀏覽器對象模型 (BOM)：

瀏覽器對象模型（Browser Object Model (BOM)）尚無正式標準。

由于現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

Window 對象：

所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。

全局變量是 window 對象的屬性。

全局函數是 window 對象的方法。

甚至 HTML DOM 的 document 也是 window 對象的屬性之一。

http://www.iis7.com/b/wzjk/

語法：window.document.getElementById("header") == document.getElementById("header")

Window 尺寸：

有三種方法能夠確定瀏覽器窗口的尺寸。

對于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度(包括滾動條)。

window.innerWidth - 瀏覽器窗口的內部寬度(包括滾動條)。

對于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

以下例子顯示瀏覽器窗口的高度和寬度：（不包括工具欄/滾動條）

<p id="demo"></p>

<script>

var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;

var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="瀏覽器window寬度: " + w + ", 高度: " + h + "。"

</script>

其他 Window 方法：

window.open()，打開新窗口。

window.close()，關閉當前窗口。

window.moveTo()，移動當前窗口。

window.resizeTo()，調整當前窗口的尺寸。

  ：

JavaScript Window Screen(屏幕)

window.screen 對象包含有關用戶屏幕的信息。

window.screen對象在編寫時可以不使用 window 這個前綴，一些屬性：

screen.availWidth，可用的屏幕寬度。

screen.availHeight，可用的屏幕高度。

Window Screen 可用寬度：

screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務欄。

Window Screen 可用高度：

screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務欄。

(screen.width + "*" + screen.height)，總寬度/高度。

(screen.availWidth + "*" + screen.availHeight)，可用寬度/高度。

screen.colorDepth，色彩深度。

screen.pixelDepth，色彩分辨率。

 ：

JavaScript Window Location(地址URL)

window.location 對象用于獲得當前頁面的地址 (URL)，并把瀏覽器重定向到新的頁面。

Window Location(地址URL)：

window.location 對象在編寫時可不使用 window 這個前綴。 一些例子：

location.hostname，返回 web 主機的域名。

location.pathname，返回當前頁面的路徑和文件名。

location.port 返回，web 主機的端口 （80 或 443）。

location.protocol，返回所使用的 web 協議（http:// 或 https://）。

location.href，屬性返回當前頁面的 URL。

Window Location Pathname(路徑名)：

location.pathname，屬性返回 URL 的路徑名。

Window Location Assign(加載)：

location.assign()，方法加載新的文檔。

 ：

JavaScript Window History(歷史)

window.history 對象包含瀏覽器的歷史。

window.history對象在編寫時可不使用 window 這個前綴。

為了保護用戶隱私，對 JavaScript 訪問該對象的方法做出了限制。

history.back()，與在瀏覽器點擊 "后退" 按鈕相同。

history.forward()，與在瀏覽器中點擊 "向前" 按鈕相同。

(歷史回溯)history.back() 方法加載歷史列表中的前一個 URL，這與在瀏覽器中點擊后退按鈕是相同的。

(歷史前進)history forward() 方法加載歷史列表中的下一個 URL，這與在瀏覽器中點擊前進按鈕是相同的。

 ：

JavaScript Window Navigator(導航)

window.navigator 對象包含有關訪問者瀏覽器的信息。

window.navigator 對象在編寫時可不使用 window 這個前綴。

navigator.appCodeName，瀏覽器代號。

navigator.appName，瀏覽器名稱。

navigator.appVersion，瀏覽器版本。

navigator.cookieEnabled，啟用Cookies(信息記錄程序)。

navigator.platform，硬件平臺。

navigator.userAgent，用戶代理。

navigator.systemLanguage， 用戶代理語言。

注意：來自 navigator 對象的信息具有誤導性，不應該被用于檢測瀏覽器版本，這是因為：

navigator 數據可被瀏覽器使用者更改，一些瀏覽器對測試站點會識別錯誤，瀏覽器無法報告晚于瀏覽器發布的新操作系統。

瀏覽器檢測：

由于 navigator 可誤導瀏覽器檢測，使用對象檢測可用來嗅探不同的瀏覽器。

由于不同的瀏覽器支持不同的對象，您可以使用對象來檢測瀏覽器。例如，由于只有 Opera 支持屬性 "window.opera"，您可以據此識別出 Opera。

 ：

JavaScript 彈窗

可以在 JavaScript 中創建三種消息框："警告框"、"確認框"、"提示框"。

警告框：警告框經常用于確保用戶可以得到某些信息，當警告框出現后，用戶需要點擊確定按鈕才能繼續進行操作。

語法：window.alert("sometext")，window.alert() 方法可以不帶上window對象，直接使用alert()方法。

確認框：確認框通常用于驗證是否接受用戶操作。

當確認卡彈出時，用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。

當你點擊 "確認", 確認框返回 true， 點擊 "取消", 確認框返回 false。

語法：window.confirm("sometext")，window.confirm() 方法可以不帶上window對象，直接使用confirm()方法。

提示框：提示框經常用于提示用戶在進入頁面前輸入某個值。

當提示框出現后，用戶需要輸入某個值，然后點擊確認或取消按鈕才能繼續操縱。

如果用戶點擊確認，那么返回值為輸入的值。如果用戶點擊取消，那么返回值為 null。

語法：window.prompt("sometext","defaultvalue(內定值)")，window.prompt() 方法可以不帶上window對象，直接使用prompt()方法。

換行：彈窗使用 反斜杠 + "n"(\n) 來設置換行。

 ：

JavaScript 計時事件

JavaScript 一個設定的時間間隔之后來執行代碼，我們稱之為 "計時事件"。

JavaScript 計時事件：

通過使用 JavaScript，我們有能力做到在一個設定的時間間隔之后來執行代碼，而不是在函數被調用后立即執行。我們稱之為計時事件。

在 JavaScritp 中使用計時事件是很容易的，兩個關鍵方法是:

setInterval()，間隔指定的毫秒數不停地執行指定的代碼，間隔毫秒一直循環下去。

setTimeout()，在指定的毫秒數后執行指定代碼。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window對象的兩個方法。

setInterval()方法

語法：window.setInterval("javascript function",(毫秒)milliseconds);

window.setInterval() 方法可以不使用window前綴，直接使用函數setInterval()。setInterval() 第一個參數是函數（function），第二個參數間隔的毫秒數。

clearInterval() 方法用于停止 setInterval() 方法執行的函數代碼。

語法：window.clearInterval(intervalVariable)。

window.clearInterval() 方法可以不使用window前綴，直接使用函數clearInterval()。

要使用 clearInterval("你要停止的東西") 方法, 在創建計時方法時你必須使用全局變量。

setTimeout() 方法

語法：myVar= window.setTimeout("javascript function", (毫秒)milliseconds);

setTimeout() 方法會返回某個值。

setTimeout() 的第一個參數是含有 JavaScript 語句的字符串。這個語句可能諸如 "alert('5 seconds!')"，或者對函數的調用，諸如 alertMsg。

第二個參數指示從當前起多少毫秒后執行第一個參數。

clearTimeout() 方法用于停止執行setTimeout()方法的函數代碼。

語法：window.clearTimeout(timeoutVariable)。

window.clearTimeout() 方法可以不使用window 前綴。

要使用clearTimeout() 方法, 你必須在創建超時方法中（setTimeout）使用全局變量。

如果函數還未被執行，你可以使用 clearTimeout() 方法來停止執行函數代碼。

注意: 1000 毫秒是一秒。

下列例子是在頁面上顯示一個時鐘：

<p id="demo"></p>

<script>

var myVar=setInterval(function(){myTimer()},1000);

function myTimer(){

var d=new Date();

var t=d.toLocaleTimeString();

document.getElementById("demo").innerHTML=t;

}

</script>

 ：

JavaScript Cookie(信息記錄程序)

Cookie 用于存儲 web 頁面的用戶信息。

Cookie 是一些數據, 存儲于你電腦上的文本文件中。

當 web 服務器向瀏覽器發送 web 頁面時，在連接關閉后，服務端不會記錄用戶的信息。

Cookie 的作用就是用于解決 "如何記錄客戶端的用戶信息":

當用戶訪問 web 頁面時，他的名字可以記錄在 cookie 中。

在用戶下一次訪問該頁面時，可以在 cookie 中讀取用戶訪問記錄。

Cookie 以名/值對形式存儲，如右所示：username=John Doe

當瀏覽器從服務器上請求 web 頁面時， 屬于該頁面的 cookie 會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。

使用 JavaScript 創建Cookie，JavaScript 可以使用 document.cookie 屬性來創建 、讀取、及刪除 cookie。

JavaScript 中，創建 cookie 如右所示：document.cookie="username=John Doe";

您還可以為 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";

您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬于當前頁面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用 JavaScript 讀取 Cookie：

在 JavaScript 中, 可以使用如右所示代碼來讀取 cookie：var x = document.cookie;

document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

使用 JavaScript 修改 Cookie：

在 JavaScript 中，修改 cookie 類似于創建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"，舊的 cookie 將被覆蓋。

使用 JavaScript 刪除 Cookie：

刪除 cookie 非常簡單。您只需要設置 expires 參數為以前的時間即可，如下所示，設置為 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意，當您刪除時不必指定 cookie 的值。

Cookie 字符串：

document.cookie 屬性看起來像一個普通的文本字符串，其實它不是。

即使您在 document.cookie 中寫入一個完整的 cookie 字符串, 當您重新讀取該 cookie 信息時，cookie 信息是以名/值對的形式展示的。

如果您設置了新的 cookie，舊的 cookie 不會被覆蓋。 新 cookie 將添加到 document.cookie 中，所以如果您重新讀取document.cookie。

如果您需要查找一個指定 cookie 值，您必須創建一個JavaScript 函數在 cookie 字符串中查找 cookie 值。

到此，相信大家對“怎么理解Javascript中瀏覽器對象模型”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！