瀏覽器物件模型(BOM)

詳細內容
分類：Javascript
發佈：2013-11-07, 週四 10:26
點擊數：2338

瀏覽器物件模型(Browser Object Model)

瀏覽器物件模型，一般都簡稱為BOM，是Javascript與瀏覽器溝通的橋樑，讓Javascript可以透過BOM對瀏覽器進行各種操作，包含開啟/關閉視窗，改變視窗大小，計時器與取得位址之類的。

瀏覽器物件模型在Javascript中十分常用，也算是基礎的一部分，但奇怪的是他其實並沒有正式的標準。不過還好大部分的瀏覽器都還依循著一定的規則，在許多方面其實都是通用的，雖然有些部分依然存在著差異。

Window 物件：

瀏覽器物件模型有著階層性的架構，最上層便是Window物件，代表著瀏覽器視窗本身，若是視窗中含有框架，則每個框架都還有屬於自己的window物件。

所有的BOM都可透過window來存取。window物件的使用不須經過宣告，可以直接使用。事實上，在Javcascript中，所有的全域變數、函式、物件，其實都是屬於window物件。

下面用一個小程式來證明這點：

<script>
x=5;
alert (window.x); //輸出 5
</script>

很明顯，全域變數x是window物件的一個屬性。事實上，上面使用到的 alert() 函式，也是window的一個方法。

以window物件為頂層的BOM架構大致如下(不完全)：

常用的window屬性：

属性 說明
closed 返回視窗是否已關閉。
defaultStatus 用於瀏覽器狀態欄內的預設字符串。
document document物件。
history history物件。
innerheight 視窗內部高度，在IE8(包含)之前，無法使用。可以用document.documentElement.clientHeight作為代替。
innerwidth 視窗內部寬度，在IE8(包含)之前，無法使用。可以用document.documentElement.clientWidth作為代替。
length 返回框架數量。
location location物件。
name 視窗名稱。
Navigator Navigator物件。
opener 表示打開窗口的Window對象。
outerheight 返回視窗外部高度。
outerwidth 返回視窗外部寬度。
pageXOffset 當前頁面相對於視窗顯示區左上角的X位置。
pageYOffset 當前頁面相對於視窗顯示區左上角的Y位置。
parent 返回父視窗。
Screen screen物件。
self 視窗本身的引用。
status 顯示瀏覽器狀態欄的字串。
top 最頂層祖先視窗
window 視窗本身的引用。

常用的window方法：

方法 說明
alert() 跳出一個警告訊息窗。
blur() 移除該視窗焦點。
clearInterval() 取消由 setInterval() 設定的計時器。
clearTimeout() 取消由 setTimeout() 方法設定的計時器。
close() 關閉瀏覽器視窗
confirm() 跳出一個有確認與取消按鈕地確認框。
createPopup() 建立一個彈出視窗。
focus() 取得焦點。
moveBy() 以相對位置移動視窗。
moveTo() 移動視窗到指定位置。
open() 開啟一個新的瀏覽器視窗。
print() 輸出目前窗口內容。
prompt() 跳出可輸入訊息的對話
resizeBy() 調整視窗大小。
resizeTo() 調整視窗大小。
scrollBy() 滾動內容。
scrollTo() 滾動內容。
setInterval() 計時器。
setTimeout() 計時器。
 
 

  按個讚!~支持本站!~

FB推薦載入中