瀏覽器對象模型BOM

瀏覽器對象模型BOM（Browser Object Model）

一、結構

• BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型
• BOM提供了獨立於內容而與瀏覽器窗口進行交互的對象
• 因爲BOM主要用於管理窗口與窗口之間的通信，所以其核心對象是window
• BOM由一系列相關的對象構成，而且每一個對象都提供了不少方法與屬性
• BOM缺少標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——網頁超文本應用程序技術工做組目前正在努力促進BOM的標準化）
• BOM最初是Netscape瀏覽器標準的一部分

結構圖以下：

二、BOM的做用

BOM提供了一些訪問窗口對象的一些方法，咱們能夠用它來移動窗口位置，改變窗口大小，打開新窗口和關閉窗口，彈出對話框，進行導航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象，以使得咱們能夠經過這個入口來使用DOM的強大功能！！！

window對象是BOM的頂層(核心)對象，全部對象都是經過它延伸出來的，也能夠稱爲window的子對象。因爲window是頂層對象，所以調用它的子對象時能夠不顯示的指明window對象，例以下面兩行代碼是同樣的：

            document.write("BOM");
            window.document.write("BOM");

View Code

window -- window對象是BOM中全部對象的核心。window對象表示整個瀏覽器窗口，但沒必要表示其中包含的內容。此外，window還可用於移動或調整它表示的瀏覽器的大小，或者對它產生其餘影響。

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

三、window子對象

• document 對象
• frames 對象
• history 對象
• location 對象
• navigator 對象
• screen 對象

四、window對象關係屬性

• parent：若是當前窗口爲frame，指向包含該frame的窗口的frame （frame）
• self ：指向當前的window對象，與window贊成。 （window對象）
• top ：若是當前窗口爲frame，指向包含該frame的top-level的window對象
• window ：指向當前的window對象，與self贊成。
• opener ：當窗口是用javascript打開時，指向打開它的那人窗口（開啓者）

五、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屬性判斷瀏覽器窗口自身的大小。

六、window對象的方法

window方法及其描述

方法	描述
alert()	彈出一個帶有一段消息和確認按鈕的窗體
blur()	把鍵盤焦點從頂層窗口移開
clearInterval()	取消由setInterval()設置的timeout
clearTimeout()	取消有setTimeout()方法設置的timeout
close()	關閉瀏覽器窗口
confirm()	顯示帶有一段消息以及確認按鈕盒取消按鈕的對話框
focus()	把鍵盤焦點給予一個窗口
moveBy()	可相對窗口的當前座標移動指定的像素
moveTo()	把窗口的左上角移動到一個指定的座標
open()	打開一個新的瀏覽器窗體
prompt()	顯示可提示用戶輸入的對話框
resizeBy()	按照指定的像素調整窗口的大小
resizeTo()	把窗體的大小調整到指定的寬度和高度
scrollBy()	按照指定的像素值來滾動內容
scrollTo()	把內容滾動到指定的座標
setInterval()	按照指定的週期(毫秒)來調用函數或計算表達式
setTimeout()	在指定的毫秒數後調用函數或表達式

.window.open("www.baidu.com","dqcx","height=200,width=300,top=20,left=20,resizable=yes");　　//打開一個新的窗體
.if(confirm(「肯定關閉？」))
　　alert("你點擊了肯定");
　else
　　alert("你點擊了取消");　　　　//confirm()方法，注意它只接受一個參數，即要顯示的文本
.var name=prompt("姓名：","");　　　　//prompt()方法，提示用戶輸入某些信息，接受連個參數，一個顯示文本，一個默認輸入文本
.window.history.go(-1);　　　　//後退一頁
　window.history.go(1);　　　　//前進一頁

View Code

窗體控制

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方法語法

            window.open(url, name, features, replace);

open方法參數說明

• url -- 要載入窗體的URL
• name -- 新建窗體的名稱(目標,將在a 標籤的target屬性中用到，當與已有窗體名稱相同時將覆蓋窗體內容).open函數默認的打開窗體的方式爲target的_blank彈出方式，所以頁面都將以彈出的方式打開
• features -- 表明窗體特性的字符串，字符串中每一個特性使用逗號分隔
• replace -- 一個布爾值，說明新載入的頁面是否替換當前載入的頁面，此參數一般不用指定

open函數features參數說明,若是不使用第三個參數，將打開一個新的普通窗口

參數名稱	類型	說明
height	Number	設置窗體的高度，不能小於100
left	Number	說明建立窗體的左座標，不能爲負值
location	Boolean	窗體是否顯示地址欄，默認值爲no
resizable	Boolean	窗體是否容許經過拖動邊線調整大小，默認值爲no
scrollbars	Boolean	窗體中內部超出窗口可視範圍時是否容許拖動，默認值爲no
toolbar	Boolean	窗體是否顯示工具欄，默認值爲no
top	Number	說明建立窗體的上座標，不能爲負值
status	Boolean	窗體是否顯示狀態欄，默認值爲no
width	Number	建立窗體的寬度，不能小於100

　 特性字符串中的每一個特性使用逗號分隔，每一個特性之間不容許有空格

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

對話框

alert(str)—— 彈出消息對話框（對話框中有一個「肯定」按鈕）

confirm(str)—— 彈出消息對話框（對話框中包含一個「肯定」按鈕與「取消」按鈕）

prompt(str,defaultValue)——彈出消息對話框（對話框中包含一個「肯定」按鈕、「取消」按鈕與一個文本輸入框），因爲各個瀏覽器實現的不一樣，若沒有第二個參數（文本框中的默認值）時也最好提供一個空字符串

狀態欄

window.defaultStatus 屬性——改變瀏覽器狀態欄的默認顯示(當狀態欄沒有其它顯示時)，瀏覽器底部的區域稱爲狀態欄，用於向用戶顯示信息

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

時間等待與間隔函數

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

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

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

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

setTimeout與setInterval方法有兩個參數，第一個參數能夠爲字符串形式的代碼，也能夠是函數引用，第二個參數爲間隔毫秒數,它們的返回是一個可用於對應clear方法的數字ID

            var tid = setTimeout("alert('1')",1000);

            alert(tid);

            clearTimeout(tid);

View Code

七、History對象,在瀏覽器歷史記錄中導航

History 對象的屬性:length 返回瀏覽器歷史列表中的 URL 數量

History 對象的方法

• back() 加載 history 列表中的前一個 URL
• forward() 加載 history 列表中的下一個 URL
• go(num) 加載 history 列表中的某個具體頁面

八、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 對象中的當前紀錄。

九、Navigator對象

Navigator 對象的屬性

• appCodeName 返回瀏覽器的代碼名
• appName 返回瀏覽器的名稱
• appVersion 返回瀏覽器的平臺和版本信息
• browserLanguage 返回當前瀏覽器的語言
• cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值
• cpuClass 返回瀏覽器系統的 CPU 等級
• onLine 返回指明系統是否處於脫機模式的布爾值
• platform 返回運行瀏覽器的操做系統平臺
• systemLanguage 返回 OS 使用的默認語言
• userAgent 返回由客戶機發送服務器的 user-agent 頭部的值
• userLanguage 返回 OS 的天然語言設置

十、screen對象

javascript能夠獲取某些關於用戶屏幕的信息

屬性	描述
availHeight	返回顯示屏幕的高度（除window任務欄）
availWidth	返回顯示屏幕的寬度（除window任務欄）
deviceXDPI	返回顯示屏幕的每英寸水平點數
deviceXDPI	返回顯示屏幕的每英寸垂直點數
fontSmoothingEnabled	返回用戶是否在顯示控制面板中開啓了字體平滑
height	返回顯示屏幕的高度
logicalXDPI	返回顯示屏幕每英寸的水平方向的常規點數
logicalYDPI	返回顯示屏幕每英寸的垂直方向的常規點數
pixelDepth	返回 顯示屏幕的顏色分辨率（比特每像素）
updateInterval	設置或返回屏幕的刷新率
width	返回顯示器屏幕的寬度

每一個window對象的screen屬性都引用screen對象。該對象存放着有關顯示器屏幕相關的信息，咱們能夠根據這些信息來優化頁面的輸入等等。

十一、框架與多窗口通訊

子窗口與父窗口

只有自身和使用window.open方法打開的窗口和才能被JavaScript訪問,window.open方法打開的窗口經過window.opener屬性來訪問父窗口。 而在opener窗口中，能夠經過window.open方法的返回值來訪問打開的窗口！

框架

window.frames集合：在框架集或包含iframe標籤的頁面中，frames集合包含了對有框架中窗口的引用

alert(frames.length);//框架的數目
    alert(frames[0].document.body.innerHTML);//使用下標直接獲取對框架中窗口的引用
    //不但可使用下標，還可使用frame標籤的name屬性
    alert(frames["frame1"].document.title);

View Code

在框架集中還可使用ID來獲取子窗口的引用

var frame1 =document.getElementById("frame1");//這樣只是獲取了標籤
    var frame1Win = frame1.contentWindow;//frame對象的contentWindow包含了窗口的引用
    //還能夠直接獲取框架中document的引用
    var frameDoc = frame1.contentDocument;
    alert(frameDoc);//但IE不支持contentDocument屬性

View Code

子窗口訪問父窗口——window對象的parent屬性

子窗口訪問頂層——window對象的top屬性