# javascript快速入門13--BOM——瀏覽器對象模型(Browser Object Model) ## 什么是BOM？ * BOM是Browser Object Model的縮寫，簡稱瀏覽器對象模型 * BOM提供了獨立于內容而與瀏覽器窗口進行交互的對象 * 由于BOM主要用于管理窗口與窗口之間的通訊，因此其核心對象是window * BOM由一系列相關的對象構成，并且每個對象都提供了很多方法與屬性 * BOM缺乏標準，JavaScript語法的標準化組織是ECMA，DOM的標準化組織是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——網頁超文本應用程序技術工作組目前正在努力促進BOM的標準化） * BOM最初是Netscape瀏覽器標準的一部分 基本的BOM體系結構圖  ## 能利用BOM做什么？ BOM提供了一些訪問窗口對象的一些方法，我們可以用它來移動窗口位置，改變窗口大小，打開新窗口和關閉窗口，彈出對話框，進行導航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強大的功能是它提供了一個訪問HTML頁面的一入口——document對象，以使得我們可以通過這個入口來使用DOM的強大功能！！！ window對象是BOM的頂層(核心)對象，所有對象都是通過它延伸出來的，也可以稱為window的子對象。由于window是頂層對象，因此調用它的子對象時可以不顯示的指明window對象，例如下面兩行代碼是一樣的： ``` document.write("BOM"); window.document.write("BOM"); ``` 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對象的方法 窗體控制 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); ``` ### 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 的自然語言設置 ## 框架與多窗口通信 ### 子窗口與父窗口 只有自身和使用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); ``` 在框架集中還可以使用ID來獲取子窗口的引用 ``` var frame1 =document.getElementById("frame1");//這樣只是獲取了標簽 var frame1Win = frame1.contentWindow;//frame對象的contentWindow包含了窗口的引用 //還可以直接獲取框架中document的引用 var frameDoc = frame1.contentDocument; alert(frameDoc);//但IE不支持contentDocument屬性 ``` ### 子窗口訪問父窗口——window對象的parent屬性 ### 子窗口訪問頂層——window對象的top屬性 ## 瀏覽器檢測 市場上的瀏覽器種類多的不計其數，它們的解釋引擎各不相同，期待所有瀏覽器都一致的支持JavaScript,CSS,DOM,那要等到不知什么時候，然而開發者不能干等著那天。歷史上已經有不少方法來解決瀏覽器兼容問題了，主要分為兩種：1.userAgent字符串檢測，2.對象檢測；當然，也不能考慮所有的瀏覽器，我們需要按照客戶需求來，如果可以確信瀏覽網站的用戶都使用或大部分使用IE瀏覽器，那么你大可放心的使用IE專有的那些豐富的擴展，當然，一旦用戶開始轉向另一個瀏覽，那么痛苦的日子便開始了。下面是市場上的主流瀏覽器列表： * Internet Explorer * Mozilla Firefox * Google Chrome * Opera * Safari 注意，瀏覽器總是不斷更新，我們不但要為多種瀏覽器作兼容處理，還要對同一瀏覽器多個版本作兼容處理。比如IE瀏覽器，其6.0版本和7.0版本都很流行，因為微軟IE隨著操作系統綁定安裝（之前也是同步發行，微軟平均每兩年推出一款個人桌面，同樣IE也每兩年更新一次；直到現在，由于火狐的流行，IE工作組才加快IE的更新），所以更新的較慢，6.0版和7.0版有很大差別。 市場上還存在一些其它瀏覽器，但由于它們都是使用的上面所列瀏覽器的核心，或與上面瀏覽器使用了相同的解釋引擎，所以無需多作考慮。下面是主流的瀏覽器解釋引擎列表： 1. Trident Trident （又稱為MSHTML），是微軟的窗口操作系統（Windows）搭載的網頁瀏覽器—Internet Explorer的排版引擎的名稱，它的第一個版本隨著1997年10月Internet Explorer第四版釋出，之后不斷的加入新的技術并隨著新版本的Internet Explorer釋出。在未來最新的Internet Explorer第七版中，微軟將對Trident排版引擎做了的重大的變動，除了加入新的技術之外，并增加對網頁標準的支持。盡管這些變動已經在相當大的程度上落后了其它的排版引擎。使用該引擎的主要瀏覽器：IE，TheWorld，MiniIE，Maxthon，騰訊TT瀏覽器。事實上，這些瀏覽器是直接使用了IE核心，因為其userAgent字符串中返回的信息與IE是一模一樣的！ 2. Gecko 壁虎，英文為"Gecko"。Gecko是由Mozilla基金會開發的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是讀取諸如HTML、CSS、XUL和JavaScript等的網頁內容，并呈現到用戶屏幕或打印出來。Gecko已經被許多應用程序所使用，包括若干瀏覽器，例如Firefox、Mozilla Suite、Camino,Seamonkey等等 3. Presto Presto是一個由Opera Software開發的瀏覽器排版引擎，供Opera 7.0及以上使用。Presto取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動態功能，例如網頁或其部分可隨著DOM及Script語法的事件而重新排版。Presto在推出后不斷有更新版本推出，使不少錯誤得以修正，以及閱讀Javascript效能得以最佳化，并成為速度最快的引擎。 4. KHTML 是HTML網頁排版引擎之一，由KDE所開發。KDE系統自KDE2版起，在檔案及網頁瀏覽器使用了KHTML引擎。該引擎以C++編程語言所寫，并以LGPL授權，支援大多數網頁瀏覽標準。由于微軟的Internet Explorer的占有率相當高，不少以FrontPage制作的網頁均包含只有IE才能讀取的非標準語法，為了使KHTML引擎可呈現的網頁達到最多，部分IE專屬的語法也一并支援。目前使用KHTML的瀏覽器有Safari和Google Chrome。而KHTML也產生了許多衍生品，如：WebKit,WebCore引擎 ### 利用userAgent檢測 下面是各大瀏覽器使用彈窗顯示的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  可以使用下面的代碼進行瀏覽器檢測 ``` 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 }; ``` 但這樣做并不是萬無一失的，一個特例便是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”這個字符串也不會出現，但Opera也有特殊的識別自身的方法，它會自動聲明一個opera全局變量！ 不但如此，我們的檢測還忽略了一點，就是那些使用相同引擎而品牌不同的瀏覽器，所以，直接檢測瀏覽器是沒有必要的，檢測瀏覽器的解釋引擎才是有必要的！ ``` 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 }; ```