什么是BOM？

• BOM是Browser Object Model的縮寫，簡(jiǎn)稱瀏覽器對(duì)象模型
• BOM提供了獨(dú)立于內(nèi)容而與瀏覽器窗口進(jìn)行交互的對(duì)象
• 由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對(duì)象是window
• BOM由一系列相關(guān)的對(duì)象構(gòu)成，并且每個(gè)對(duì)象都提供了很多方法與屬性
• BOM缺乏標(biāo)準(zhǔn)，JavaScript語法的標(biāo)準(zhǔn)化組織是ECMA，DOM的標(biāo)準(zhǔn)化組織是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——網(wǎng)頁(yè)超文本應(yīng)用程序技術(shù)工作組目前正在努力促進(jìn)BOM的標(biāo)準(zhǔn)化）
• BOM最初是Netscape瀏覽器標(biāo)準(zhǔn)的一部分

基本的BOM體系結(jié)構(gòu)圖

能利用BOM做什么？

BOM提供了一些訪問窗口對(duì)象的一些方法，我們可以用它來移動(dòng)窗口位置，改變窗口大小，打開新窗口和關(guān)閉窗口，彈出對(duì)話框，進(jìn)行導(dǎo)航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強(qiáng)大的功能是它提供了一個(gè)訪問HTML頁(yè)面的一入口——document對(duì)象，以使得我們可以通過這個(gè)入口來使用DOM的強(qiáng)大功能?。?！

window對(duì)象是BOM的頂層(核心)對(duì)象，所有對(duì)象都是通過它延伸出來的，也可以稱為window的子對(duì)象。由于window是頂層對(duì)象，因此調(diào)用它的子對(duì)象時(shí)可以不顯示的指明window對(duì)象，例如下面兩行代碼是一樣的：

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

window -- window對(duì)象是BOM中所有對(duì)象的核心。window對(duì)象表示整個(gè)瀏覽器窗口，但不必表示其中包含的內(nèi)容。此外，window還可用于移動(dòng)或調(diào)整它表示的瀏覽器的大小，或者對(duì)它產(chǎn)生其他影響。

JavaScript中的任何一個(gè)全局函數(shù)或變量都是window的屬性

window子對(duì)象

• document 對(duì)象
• frames 對(duì)象
• history 對(duì)象
• location 對(duì)象
• navigator 對(duì)象
• screen 對(duì)象

window對(duì)象關(guān)系屬性

• parent：如果當(dāng)前窗口為frame，指向包含該frame的窗口的frame （frame）
• self ：指向當(dāng)前的window對(duì)象，與window同意。 （window對(duì)象）
• top ：如果當(dāng)前窗口為frame，指向包含該frame的top-level的window對(duì)象
• window ：指向當(dāng)前的window對(duì)象，與self同意。
• opener ：當(dāng)窗口是用javascript打開時(shí)，指向打開它的那人窗口（開啟者）

window對(duì)象定位屬性

• IE提供了window.screenLeft和window.screenTop對(duì)象來判斷窗口的位置，但未提供任何判斷窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight屬性可以獲取視口的大小（顯示HTML頁(yè)的區(qū)域），但它們不是標(biāo)準(zhǔn)屬性。
• Mozilla提供window.screenX和window.screenY屬性判斷窗口的位置。它還提供了window.innerWidth和window.innerHeight屬性來判斷視口的大小，window.outerWidth和window.outerHeight屬性判斷瀏覽器窗口自身的大小。

window對(duì)象的方法

窗體控制

moveBy(x,y)——從當(dāng)前位置水平移動(dòng)窗體x個(gè)像素，垂直移動(dòng)窗體y個(gè)像素，x為負(fù)數(shù)，將向左移動(dòng)窗體，y為負(fù)數(shù)，將向上移動(dòng)窗體

moveTo(x,y)——移動(dòng)窗體左上角到相對(duì)于屏幕左上角的(x,y)點(diǎn)，當(dāng)使用負(fù)數(shù)做為參數(shù)時(shí)會(huì)吧窗體移出屏幕的可視區(qū)域

resizeBy(w,h)——相對(duì)窗體當(dāng)前的大小，寬度調(diào)整w個(gè)像素，高度調(diào)整h個(gè)像素。如果參數(shù)為負(fù)值，將縮小窗體，反之?dāng)U大窗體

resizeTo(w,h)——把窗體寬度調(diào)整為w個(gè)像素，高度調(diào)整為h個(gè)像素

窗體滾動(dòng)軸控制

scrollTo(x,y)——在窗體中如果有滾動(dòng)條，將橫向滾動(dòng)條移動(dòng)到相對(duì)于窗體寬度為x個(gè)像素的位置，將縱向滾動(dòng)條移動(dòng)到相對(duì)于窗體高度為y個(gè)像素的位置

scrollBy(x,y)—— 如果有滾動(dòng)條，將橫向滾動(dòng)條移動(dòng)到相對(duì)于當(dāng)前橫向滾動(dòng)條的x個(gè)像素的位置(就是向左移動(dòng)x像素)，將縱向滾動(dòng)條移動(dòng)到相對(duì)于當(dāng)前縱向滾動(dòng)條高度為y個(gè)像素的位置(就是向下移動(dòng)y像素)

窗體焦點(diǎn)控制

focus()—— 使窗體或控件獲取焦點(diǎn)

blur()——與focus函數(shù)相反，使窗體或控件失去焦點(diǎn)

新建窗體

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

close()——關(guān)閉窗體

opener屬性——新建窗體中對(duì)父窗體的引用，中文"開啟者"的意思

window.open方法語法

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

open方法參數(shù)說明

• url -- 要載入窗體的URL
• name -- 新建窗體的名稱(目標(biāo),將在a 標(biāo)簽的target屬性中用到，當(dāng)與已有窗體名稱相同時(shí)將覆蓋窗體內(nèi)容).open函數(shù)默認(rèn)的打開窗體的方式為target的_blank彈出方式，因此頁(yè)面都將以彈出的方式打開
• features -- 代表窗體特性的字符串，字符串中每個(gè)特性使用逗號(hào)分隔
• replace -- 一個(gè)布爾值，說明新載入的頁(yè)面是否替換當(dāng)前載入的頁(yè)面，此參數(shù)通常不用指定

open函數(shù)features參數(shù)說明,如果不使用第三個(gè)參數(shù)，將打開一個(gè)新的普通窗口

　 特性字符串中的每個(gè)特性使用逗號(hào)分隔，每個(gè)特性之間不允許有空格

open方法返回值為一個(gè)新窗體的window對(duì)象的引用

對(duì)話框

alert(str)—— 彈出消息對(duì)話框（對(duì)話框中有一個(gè)“確定”按鈕）

confirm(str)—— 彈出消息對(duì)話框（對(duì)話框中包含一個(gè)“確定”按鈕與“取消”按鈕）

prompt(str,defaultValue)——彈出消息對(duì)話框（對(duì)話框中包含一個(gè)“確定”按鈕、“取消”按鈕與一個(gè)文本輸入框），由于各個(gè)瀏覽器實(shí)現(xiàn)的不同，若沒有第二個(gè)參數(shù)（文本框中的默認(rèn)值）時(shí)也最好提供一個(gè)空字符串

狀態(tài)欄

window.defaultStatus 屬性——改變?yōu)g覽器狀態(tài)欄的默認(rèn)顯示(當(dāng)狀態(tài)欄沒有其它顯示時(shí))，瀏覽器底部的區(qū)域稱為狀態(tài)欄，用于向用戶顯示信息

window.status 屬性——臨時(shí)改變?yōu)g覽器狀態(tài)欄的顯示

時(shí)間等待與間隔函數(shù)

setTimeout()—— 暫停指定的毫秒數(shù)后執(zhí)行指定的代碼

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

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

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

setTimeout與setInterval方法有兩個(gè)參數(shù)，第一個(gè)參數(shù)可以為字符串形式的代碼，也可以是函數(shù)引用，第二個(gè)參數(shù)為間隔毫秒數(shù),它們的返回是一個(gè)可用于對(duì)應(yīng)clear方法的數(shù)字ID

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

History對(duì)象,在瀏覽器歷史記錄中導(dǎo)航

History 對(duì)象的屬性:length 返回瀏覽器歷史列表中的 URL 數(shù)量

History 對(duì)象的方法

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

Location 對(duì)象

Location 對(duì)象的屬性

• hash 設(shè)置或返回從井號(hào) (#) 開始的 URL（錨）
• host 設(shè)置或返回主機(jī)名和當(dāng)前 URL 的端口號(hào)
• hostname 設(shè)置或返回當(dāng)前 URL 的主機(jī)名
• href 設(shè)置或返回完整的 URL
• pathname 設(shè)置或返回當(dāng)前 URL 的路徑部分
• port 設(shè)置或返回當(dāng)前 URL 的端口號(hào)
• protocol 設(shè)置或返回當(dāng)前 URL 的協(xié)議
• search 設(shè)置或返回從問號(hào) (?) 開始的 URL（查詢部分）

Location 對(duì)象的方法

• assign() 加載新的文檔,這與直接將一個(gè)URL賦值給Location對(duì)象的href屬性效果是一樣的
• reload() 重新加載當(dāng)前文檔，如果該方法沒有規(guī)定參數(shù)，或者參數(shù)是 false，它就會(huì)用 HTTP 頭 If-Modified-Since 來檢測(cè)服務(wù)器上的文檔是否已改變。如果文檔已改變，reload() 會(huì)再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。如果把該方法的參數(shù)設(shè)置為 true，那么無論文檔的最后修改日期是什么，它都會(huì)繞過緩存，從服務(wù)器上重新下載該文檔。這與用戶在單擊瀏覽器的刷新按鈕時(shí)按住 Shift 健的效果是完全一樣。
• replace() 用新的文檔替換當(dāng)前文檔，replace() 方法不會(huì)在 History 對(duì)象中生成一個(gè)新的紀(jì)錄。當(dāng)使用該方法時(shí)，新的 URL 將覆蓋 History 對(duì)象中的當(dāng)前紀(jì)錄。

Navigator對(duì)象

Navigator 對(duì)象的屬性

• appCodeName 返回瀏覽器的代碼名
• appName 返回瀏覽器的名稱
• appVersion 返回瀏覽器的平臺(tái)和版本信息
• browserLanguage 返回當(dāng)前瀏覽器的語言
• cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值
• cpuClass 返回瀏覽器系統(tǒng)的 CPU 等級(jí)
• onLine 返回指明系統(tǒng)是否處于脫機(jī)模式的布爾值
• platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)
• systemLanguage 返回 OS 使用的默認(rèn)語言
• userAgent 返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值
• userLanguage 返回 OS 的自然語言設(shè)置

框架與多窗口通信

子窗口與父窗口

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

框架

window.frames集合：在框架集或包含iframe標(biāo)簽的頁(yè)面中，frames集合包含了對(duì)有框架中窗口的引用

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

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

    var frame1 =document.getElementById("frame1");//這樣只是獲取了標(biāo)簽
    var frame1Win = frame1.contentWindow;//frame對(duì)象的contentWindow包含了窗口的引用
    //還可以直接獲取框架中document的引用
    var frameDoc = frame1.contentDocument;
    alert(frameDoc);//但I(xiàn)E不支持contentDocument屬性

子窗口訪問父窗口——window對(duì)象的parent屬性

子窗口訪問頂層——window對(duì)象的top屬性

瀏覽器檢測(cè)

市場(chǎng)上的瀏覽器種類多的不計(jì)其數(shù)，它們的解釋引擎各不相同，期待所有瀏覽器都一致的支持JavaScript,CSS,DOM,那要等到不知什么時(shí)候，然而開發(fā)者不能干等著那天。歷史上已經(jīng)有不少方法來解決瀏覽器兼容問題了，主要分為兩種：1.userAgent字符串檢測(cè)，2.對(duì)象檢測(cè)；當(dāng)然，也不能考慮所有的瀏覽器，我們需要按照客戶需求來，如果可以確信瀏覽網(wǎng)站的用戶都使用或大部分使用IE瀏覽器，那么你大可放心的使用IE專有的那些豐富的擴(kuò)展，當(dāng)然，一旦用戶開始轉(zhuǎn)向另一個(gè)瀏覽，那么痛苦的日子便開始了。下面是市場(chǎng)上的主流瀏覽器列表：

• Internet Explorer
• Mozilla Firefox
• Google Chrome
• Opera
• Safari

注意，瀏覽器總是不斷更新，我們不但要為多種瀏覽器作兼容處理，還要對(duì)同一瀏覽器多個(gè)版本作兼容處理。比如IE瀏覽器，其6.0版本和7.0版本都很流行，因?yàn)槲④汭E隨著操作系統(tǒng)綁定安裝（之前也是同步發(fā)行，微軟平均每?jī)赡晖瞥鲆豢顐€(gè)人桌面，同樣IE也每?jī)赡旮乱淮?；直到現(xiàn)在，由于火狐的流行，IE工作組才加快IE的更新），所以更新的較慢，6.0版和7.0版有很大差別。

市場(chǎng)上還存在一些其它瀏覽器，但由于它們都是使用的上面所列瀏覽器的核心，或與上面瀏覽器使用了相同的解釋引擎，所以無需多作考慮。下面是主流的瀏覽器解釋引擎列表：

1. Trident

   Trident （又稱為MSHTML），是微軟的窗口操作系統(tǒng)（Windows）搭載的網(wǎng)頁(yè)瀏覽器—Internet Explorer的排版引擎的名稱，它的第一個(gè)版本隨著1997年10月Internet Explorer第四版釋出，之后不斷的加入新的技術(shù)并隨著新版本的Internet Explorer釋出。在未來最新的Internet Explorer第七版中，微軟將對(duì)Trident排版引擎做了的重大的變動(dòng)，除了加入新的技術(shù)之外，并增加對(duì)網(wǎng)頁(yè)標(biāo)準(zhǔn)的支持。盡管這些變動(dòng)已經(jīng)在相當(dāng)大的程度上落后了其它的排版引擎。使用該引擎的主要瀏覽器：IE，TheWorld，MiniIE，Maxthon，騰訊TT瀏覽器。事實(shí)上，這些瀏覽器是直接使用了IE核心，因?yàn)槠鋟serAgent字符串中返回的信息與IE是一模一樣的！

2. Gecko

   壁虎，英文為"Gecko"。Gecko是由Mozilla基金會(huì)開發(fā)的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是讀取諸如HTML、CSS、XUL和JavaScript等的網(wǎng)頁(yè)內(nèi)容，并呈現(xiàn)到用戶屏幕或打印出來。Gecko已經(jīng)被許多應(yīng)用程序所使用，包括若干瀏覽器，例如Firefox、Mozilla Suite、Camino,Seamonkey等等

3. Presto

   Presto是一個(gè)由Opera Software開發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。Presto取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動(dòng)態(tài)功能，例如網(wǎng)頁(yè)或其部分可隨著DOM及Script語法的事件而重新排版。Presto在推出后不斷有更新版本推出，使不少錯(cuò)誤得以修正，以及閱讀Javascript效能得以最佳化，并成為速度最快的引擎。

4. KHTML

   是HTML網(wǎng)頁(yè)排版引擎之一，由KDE所開發(fā)。KDE系統(tǒng)自KDE2版起，在檔案及網(wǎng)頁(yè)瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫，并以LGPL授權(quán)，支援大多數(shù)網(wǎng)頁(yè)瀏覽標(biāo)準(zhǔn)。由于微軟的Internet Explorer的占有率相當(dāng)高，不少以FrontPage制作的網(wǎng)頁(yè)均包含只有IE才能讀取的非標(biāo)準(zhǔn)語法，為了使KHTML引擎可呈現(xiàn)的網(wǎng)頁(yè)達(dá)到最多，部分IE專屬的語法也一并支援。目前使用KHTML的瀏覽器有Safari和Google Chrome。而KHTML也產(chǎn)生了許多衍生品，如：WebKit,WebCore引擎

利用userAgent檢測(cè)

下面是各大瀏覽器使用彈窗顯示的userAgent字符串

IE瀏覽器：Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

火狐瀏覽器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4

Opera瀏覽器：Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1

Safari瀏覽器：Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16

Google Chrome瀏覽器：Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5

可以使用下面的代碼進(jìn)行瀏覽器檢測(cè)

    var Browser = {
        isIE:navigator.userAgent.indexOf("MSIE")!=-1,
        isFF:navigator.userAgent.indexOf("Firefox")!=-1,
        isOpera:navigator.userAgent.indexOf("Opera")!=-1,
        isSafari:navigator.userAgent.indexOf("Safari")!=-1
    };

但這樣做并不是萬無一失的，一個(gè)特例便是Opera可以使用userAgent偽裝自己。下面是偽裝成IE的userAgent：Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64；在完全偽裝的情況下，最后的“Opera 9.64”這個(gè)字符串也不會(huì)出現(xiàn)，但Opera也有特殊的識(shí)別自身的方法，它會(huì)自動(dòng)聲明一個(gè)opera全局變量！

不但如此，我們的檢測(cè)還忽略了一點(diǎn)，就是那些使用相同引擎而品牌不同的瀏覽器，所以，直接檢測(cè)瀏覽器是沒有必要的，檢測(cè)瀏覽器的解釋引擎才是有必要的！

    var Browser = {
        isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
        isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera 
        && navigator.userAgent.indexOf("KHTML") ==-1,
        isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
        isOpera:navigator.userAgent.indexOf("Opera")>-1
    };