天天看點

浏覽器對象模型BOM(Browser Object Model)

1、結構

BOM是Browser Object Model的縮寫,簡稱浏覽器對象模型

BOM提供了獨立于内容而與浏覽器視窗進行互動的對象

由于BOM主要用于管理視窗與視窗之間的通訊,是以其核心對象是window

BOM由一系列相關的對象構成,并且每個對象都提供了很多方法與屬性

BOM缺乏标準,JavaScript文法的标準化組織是ECMA,DOM的标準化組織是W3C(WHATWG,WebHypertextApplicationTechnologyWorkingGroup——網頁超文本應用程式技術工作組目前正在努力促進BOM的标準化)

BOM最初是Netscape浏覽器标準的一部分

結構圖如下:

浏覽器對象模型BOM(Browser Object Model)

2、BOM的作用

BOM提供了一些通路視窗對象的一些方法,我們可以用它來移動視窗位置,改變視窗大小,打開新視窗和關閉視窗,彈出對話框,進行導航以及擷取客戶的一些資訊如:浏覽器品牌版本,螢幕分辨率。但BOM最強大的功能是它提供了一個通路HTML頁面的一入口——document對象,以使得我們可以通過這個入口來使用DOM的強大功能!!!

window對象是BOM的頂層(核心)對象,所有對象都是通過它延伸出來的,也可以稱為window的子對象。由于window是頂層對象,是以調用它的子對象時可以不顯示的指明window對象,例如下面兩行代碼是一樣的:

浏覽器對象模型BOM(Browser Object Model)

 View Code

window -- window對象是BOM中所有對象的核心。window對象表示整個浏覽器視窗,但不必表示其中包含的内容。此外,window還可用于移動或調整它表示的浏覽器的大小,或者對它産生其他影響。

JavaScript中的任何一個全局函數或變量都是window的屬性。

3、window子對象

document 對象

frames 對象

history 對象

location 對象

navigator 對象

screen 對象

4、window對象關系屬性

parent:如果目前視窗為frame,指向包含該frame的視窗的frame (frame)

self :指向目前的window對象,與window同意。 (window對象)

top :如果目前視窗為frame,指向包含該frame的top-level的window對象

window :指向目前的window對象,與self同意。

opener :當視窗是用javascript打開時,指向打開它的那人視窗(開啟者)

5、window對象定位屬性

IE提供了window.screenLeft和window.screenTop對象來判斷視窗的位置,但未提供任何判斷視窗大小的方法。用document.body.offsetWidth和document.body. offsetHeight屬性可以擷取視口的大小(顯示HTML頁的區域),但它們不是标準屬性。

Mozilla提供window.screenX和window.screenY屬性判斷視窗的位置。它還提供了window.innerWidth和window.innerHeight屬性來判斷視口的大小,window.outerWidth和window.outerHeight屬性判斷浏覽器視窗自身的大小。

6、window對象的方法

方法 

描述

alert()

彈出一個帶有一段消息和确認按鈕的窗體

blur()

把鍵盤焦點從頂層視窗移開

clearInterval()

取消由setInterval()設定的timeout

clearTimeout()

取消有setTimeout()方法設定的timeout

close()

關閉浏覽器視窗

confirm()

顯示帶有一段消息以及确認按鈕盒取消按鈕的對話框

focus()

把鍵盤焦點給予一個視窗

moveBy()

可相對視窗的目前坐标移動指定的像素

moveTo()

把視窗的左上角移動到一個指定的坐标

open()

打開一個新的浏覽器窗體

prompt()

顯示可提示使用者輸入的對話框

resizeBy()

按照指定的像素調整視窗的大小

resizeTo()

把窗體的大小調整到指定的寬度和高度

scrollBy()

按照指定的像素值來滾動内容

scrollTo()

把内容滾動到指定的坐标

setInterval()

按照指定的周期(毫秒)來調用函數或計算表達式

setTimeout()

在指定的毫秒數後調用函數或表達式

浏覽器對象模型BOM(Browser Object Model)

窗體控制

moveBy(x,y)——從目前位置水準移動窗體x個像素,垂直移動窗體y個像素,x為負數,将向左移動窗體,y為負數,将向上移動窗體

moveTo(x,y)——移動窗體左上角到相對于螢幕左上角的(x,y)點,當使用負數做為參數時會吧窗體移出螢幕的可視區域

resizeBy(w,h)——相對窗體目前的大小,寬度調整w個像素,高度調整h個像素。如果參數為負值,将縮小窗體,反之擴大窗體

resizeTo(w,h)——把窗體寬度調整為w個像素,高度調整為h個像素

窗體滾動軸控制

scrollTo(x,y)——在窗體中如果有滾動條,将橫向滾動條移動到相對于窗體寬度為x個像素的位置,将縱向滾動條移動到相對于窗體高度為y個像素的位置

scrollBy(x,y)—— 如果有滾動條,将橫向滾動條移動到相對于目前橫向滾動條的x個像素的位置(就是向左移動x像素),将縱向滾動條移動到相對于目前縱向滾動條高度為y個像素的位置(就是向下移動y像素)

窗體焦點控制

focus()—— 使窗體或控件擷取焦點

blur()——與focus函數相反,使窗體或控件失去焦點

建立窗體

open()——打開(彈出)一個新的窗體

close()——關閉窗體

opener屬性——建立窗體中對父窗體的引用,中文"開啟者"的意思

window.open方法文法

open方法參數說明

url -- 要載入窗體的URL

name -- 建立窗體的名稱(目标,将在a 标簽的target屬性中用到,當與已有窗體名稱相同時将覆寫窗體内容).open函數預設的打開窗體的方式為target的_blank彈出方式,是以頁面都将以彈出的方式打開

features -- 代表窗體特性的字元串,字元串中每個特性使用逗号分隔

replace -- 一個布爾值,說明新載入的頁面是否替換目前載入的頁面,此參數通常不用指定

open函數features參數說明,如果不使用第三個參數,将打開一個新的普通視窗

參數名稱

類型

說明

height

Number

設定窗體的高度,不能小于100

left

說明建立窗體的左坐标,不能為負值

location

Boolean

窗體是否顯示位址欄,預設值為no

resizable

窗體是否允許通過拖動邊線調整大小,預設值為no

scrollbars

窗體中内部超出視窗可視範圍時是否允許拖動,預設值為no

toolbar

窗體是否顯示工具欄,預設值為no

top

說明建立窗體的上坐标,不能為負值

status

窗體是否顯示狀态欄,預設值為no

width

建立窗體的寬度,不能小于100

  特性字元串中的每個特性使用逗号分隔,每個特性之間不允許有空格

open方法傳回值為一個新窗體的window對象的引用

對話框

alert(str)—— 彈出消息對話框(對話框中有一個“确定”按鈕)

confirm(str)—— 彈出消息對話框(對話框中包含一個“确定”按鈕與“取消”按鈕)

prompt(str,defaultValue)——彈出消息對話框(對話框中包含一個“确定”按鈕、“取消”按鈕與一個文本輸入框),由于各個浏覽器實作的不同,若沒有第二個參數(文本框中的預設值)時也最好提供一個空字元串

狀态欄

window.defaultStatus 屬性——改變浏覽器狀态欄的預設顯示(當狀态欄沒有其它顯示時),浏覽器底部的區域稱為狀态欄,用于向使用者顯示資訊

window.status 屬性——臨時改變浏覽器狀态欄的顯示

時間等待與間隔函數

setTimeout()—— 暫停指定的毫秒數後執行指定的代碼

clearTimeout()——取消指定的setTimeout函數将要執行的代碼

setInterval()——間隔指定的毫秒數不停地執行指定的代碼

clearInterval()——取消指定的setInterval函數将要執行的代碼

setTimeout與setInterval方法有兩個參數,第一個參數可以為字元串形式的代碼,也可以是函數引用,第二個參數為間隔毫秒數,它們的傳回是一個可用于對應clear方法的數字ID

浏覽器對象模型BOM(Browser Object Model)

7、History對象,在浏覽器曆史記錄中導航

History 對象的屬性:length 傳回浏覽器曆史清單中的 URL 數量

History 對象的方法

back() 加載 history 清單中的前一個 URL

forward() 加載 history 清單中的下一個 URL

go(num) 加載 history 清單中的某個具體頁面

8、Location 對象

Location 對象的屬性

hash 設定或傳回從井号 (#) 開始的 URL(錨)

host 設定或傳回主機名和目前 URL 的端口号

hostname 設定或傳回目前 URL 的主機名

href 設定或傳回完整的 URL

pathname 設定或傳回目前 URL 的路徑部分

port 設定或傳回目前 URL 的端口号

protocol 設定或傳回目前 URL 的協定

search 設定或傳回從問号 (?) 開始的 URL(查詢部分)

Location 對象的方法

assign() 加載新的文檔,這與直接将一個URL指派給Location對象的href屬性效果是一樣的

reload() 重新加載目前文檔,如果該方法沒有規定參數,或者參數是 false,它就會用 HTTP 頭 If-Modified-Since 來檢測伺服器上的文檔是否已改變。如果文檔已改變,reload() 會再次下載下傳該文檔。如果文檔未改變,則該方法将從緩存中裝載文檔。這與使用者單擊浏覽器的重新整理按鈕的效果是完全一樣的。如果把該方法的參數設定為 true,那麼無論文檔的最後修改日期是什麼,它都會繞過緩存,從伺服器上重新下載下傳該文檔。這與使用者在單擊浏覽器的重新整理按鈕時按住 Shift 健的效果是完全一樣。

replace() 用新的文檔替換目前文檔,replace() 方法不會在 History 對象中生成一個新的紀錄。當使用該方法時,新的 URL 将覆寫 History 對象中的目前紀錄。

9、Navigator對象

Navigator 對象的屬性

appCodeName 傳回浏覽器的代碼名

appName 傳回浏覽器的名稱

appVersion 傳回浏覽器的平台和版本資訊

browserLanguage 傳回目前浏覽器的語言

cookieEnabled 傳回指明浏覽器中是否啟用 cookie 的布爾值

cpuClass 傳回浏覽器系統的 CPU 等級

onLine 傳回指明系統是否處于脫機模式的布爾值

platform 傳回運作浏覽器的作業系統平台

systemLanguage 傳回 OS 使用的預設語言

userAgent 傳回由客戶機發送伺服器的 user-agent 頭部的值

userLanguage 傳回 OS 的自然語言設定

10、screen對象

javascript可以擷取某些關于使用者螢幕的資訊

屬性

availHeight

傳回顯示螢幕的高度(除window工作列)

availWidth

傳回顯示螢幕的寬度(除window工作列)

deviceXDPI

傳回顯示螢幕的每英寸水準點數

傳回顯示螢幕的每英寸垂直點數

fontSmoothingEnabled

傳回使用者是否在顯示控制台中開啟了字型平滑

 height

傳回顯示螢幕的高度

 logicalXDPI

傳回顯示螢幕每英寸的水準方向的正常點數

 logicalYDPI

傳回顯示螢幕每英寸的垂直方向的正常點數

 pixelDepth

傳回 顯示螢幕的顔色分辨率(比特每像素)

 updateInterval

設定或傳回螢幕的重新整理率

 width

傳回顯示器螢幕的寬度

每個window對象的screen屬性都引用screen對象。該對象存放着有關顯示器螢幕相關的資訊,我們可以根據這些資訊來優化頁面的輸入等等。

11、架構與多視窗通信

子視窗與父視窗

隻有自身和使用window.open方法打開的視窗和才能被JavaScript通路,window.open方法打開的視窗通過window.opener屬性來通路父視窗。 而在opener視窗中,可以通過window.open方法的傳回值來通路打開的視窗!

架構

window.frames集合:在架構集或包含iframe标簽的頁面中,frames集合包含了對有架構中視窗的引用

浏覽器對象模型BOM(Browser Object Model)

在架構集中還可以使用ID來擷取子視窗的引用

浏覽器對象模型BOM(Browser Object Model)

子視窗通路父視窗——window對象的parent屬性

子視窗通路頂層——window對象的top屬性

<a href="http://www.cnblogs.com/dreamfly-yhl/p/3179905.html">http://www.cnblogs.com/dreamfly-yhl/p/3179905.html</a>

繼續閱讀