基本的BOM體系結(jié)構(gòu)圖
BOM提供了一些訪問(wèn)窗口對(duì)象的一些方法，我們可以用它來(lái)移動(dòng)窗口位置，改變窗口大小，打開(kāi)新窗口和關(guān)閉窗口，彈出對(duì)話框，進(jìn)行導(dǎo)航以及獲取客戶的一些信息如：瀏覽器品牌版本，屏幕分辨率。但BOM最強(qiáng)大的功能是它提供了一個(gè)訪問(wèn)HTML頁(yè)面的一入口——document對(duì)象，以使得我們可以通過(guò)這個(gè)入口來(lái)使用DOM的強(qiáng)大功能！！！
window對(duì)象是BOM的頂層(核心)對(duì)象，所有對(duì)象都是通過(guò)它延伸出來(lái)的，也可以稱為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打開(kāi)時(shí)，指向打開(kāi)它的那人窗口（開(kāi)啟者）window對(duì)象定位屬性
IE提供了window.screenLeft和window.screenTop對(duì)象來(lái)判斷窗口的位置，但未提供任何判斷窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight屬性可以獲取視口的大小（顯示HTML頁(yè)的區(qū)域），但它們不是標(biāo)準(zhǔn)屬性。Mozilla提供window.screenX和window.screenY屬性判斷窗口的位置。它還提供了window.innerWidth和window.innerHeight屬性來(lái)判斷視口的大小，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()——打開(kāi)(彈出)一個(gè)新的窗體close()——關(guān)閉窗體opener屬性——新建窗體中對(duì)父窗體的引用，中文"開(kāi)啟者"的意思window.open方法語(yǔ)法
window.open(url, name, features, replace);
open方法參數(shù)說(shuō)明
url -- 要載入窗體的URLname -- 新建窗體的名稱(目標(biāo),將在a 標(biāo)簽的target屬性中用到，當(dāng)與已有窗體名稱相同時(shí)將覆蓋窗體內(nèi)容).open函數(shù)默認(rèn)的打開(kāi)窗體的方式為target的_blank彈出方式，因此頁(yè)面都將以彈出的方式打開(kāi)features -- 代表窗體特性的字符串，字符串中每個(gè)特性使用逗號(hào)分隔replace -- 一個(gè)布爾值，說(shuō)明新載入的頁(yè)面是否替換當(dāng)前載入的頁(yè)面，此參數(shù)通常不用指定open函數(shù)features參數(shù)說(shuō)明,如果不使用第三個(gè)參數(shù)，將打開(kāi)一個(gè)新的普通窗口
| 參數(shù)名稱 | 類型 | 說(shuō)明 |
|---|---|---|
| height | Number | 設(shè)置窗體的高度，不能小于100 |
| left | Number | 說(shuō)明創(chuàng)建窗體的左坐標(biāo)，不能為負(fù)值 |
| location | Boolean | 窗體是否顯示地址欄，默認(rèn)值為no |
| resizable | Boolean | 窗體是否允許通過(guò)拖動(dòng)邊線調(diào)整大小，默認(rèn)值為no |
| scrollbars | Boolean | 窗體中內(nèi)部超出窗口可視范圍時(shí)是否允許拖動(dòng)，默認(rèn)值為no |
| toolbar | Boolean | 窗體是否顯示工具欄，默認(rèn)值為no |
| top | Number | 說(shuō)明創(chuàng)建窗體的上坐標(biāo)，不能為負(fù)值 |
| status | Boolean | 窗體是否顯示狀態(tài)欄，默認(rèn)值為no |
| width | Number | 創(chuàng)建窗體的寬度，不能小于100 |
特性字符串中的每個(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)的不同，若沒(méi)有第二個(gè)參數(shù)（文本框中的默認(rèn)值）時(shí)也最好提供一個(gè)空字符串狀態(tài)欄window.defaultStatus 屬性——改變?yōu)g覽器狀態(tài)欄的默認(rèn)顯示(當(dāng)狀態(tài)欄沒(mé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è) URLforward() 加載 history 列表中的下一個(gè) URLgo(num) 加載 history 列表中的某個(gè)具體頁(yè)面Location 對(duì)象
Location 對(duì)象的屬性
hash 設(shè)置或返回從井號(hào) (#) 開(kāi)始的 URL（錨）host 設(shè)置或返回主機(jī)名和當(dāng)前 URL 的端口號(hào)hostname 設(shè)置或返回當(dāng)前 URL 的主機(jī)名href 設(shè)置或返回完整的 URLpathname 設(shè)置或返回當(dāng)前 URL 的路徑部分port 設(shè)置或返回當(dāng)前 URL 的端口號(hào)protocol 設(shè)置或返回當(dāng)前 URL 的協(xié)議search 設(shè)置或返回從問(wèn)號(hào) (?) 開(kāi)始的 URL（查詢部分）Location 對(duì)象的方法
assign() 加載新的文檔,這與直接將一個(gè)URL賦值給Location對(duì)象的href屬性效果是一樣的reload() 重新加載當(dāng)前文檔，如果該方法沒(méi)有規(guī)定參數(shù)，或者參數(shù)是 false，它就會(huì)用 HTTP 頭 If-Modified-Since 來(lái)檢測(cè)服務(wù)器上的文檔是否已改變。如果文檔已改變，reload() 會(huì)再次下載該文檔。如果文檔未改變，則該方法將從緩存中裝載文檔。這與用戶單擊瀏覽器的刷新按鈕的效果是完全一樣的。如果把該方法的參數(shù)設(shè)置為 true，那么無(wú)論文檔的最后修改日期是什么，它都會(huì)繞過(guò)緩存，從服務(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)前瀏覽器的語(yǔ)言cookieEnabled 返回指明瀏覽器中是否啟用 cookie 的布爾值cpuClass 返回瀏覽器系統(tǒng)的 CPU 等級(jí)onLine 返回指明系統(tǒng)是否處于脫機(jī)模式的布爾值platform 返回運(yùn)行瀏覽器的操作系統(tǒng)平臺(tái)systemLanguage 返回 OS 使用的默認(rèn)語(yǔ)言u(píng)serAgent 返回由客戶機(jī)發(fā)送服務(wù)器的 user-agent 頭部的值userLanguage 返回 OS 的自然語(yǔ)言設(shè)置框架與多窗口通信
子窗口與父窗口
只有自身和使用window.open方法打開(kāi)的窗口和才能被JavaScript訪問(wèn),window.open方法打開(kāi)的窗口通過(guò)window.opener屬性來(lái)訪問(wèn)父窗口。 而在opener窗口中，可以通過(guò)window.open方法的返回值來(lái)訪問(wèn)打開(kāi)的窗口！
框架
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來(lái)獲取子窗口的引用
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屬性
子窗口訪問(wèn)父窗口——window對(duì)象的parent屬性
子窗口訪問(wèn)頂層——window對(duì)象的top屬性
瀏覽器檢測(cè)
市場(chǎng)上的瀏覽器種類多的不計(jì)其數(shù)，它們的解釋引擎各不相同，期待所有瀏覽器都一致的支持JavaScript,CSS,DOM,那要等到不知什么時(shí)候，然而開(kāi)發(fā)者不能干等著那天。歷史上已經(jīng)有不少方法來(lái)解決瀏覽器兼容問(wèn)題了，主要分為兩種：1.userAgent字符串檢測(cè)，2.對(duì)象檢測(cè)；當(dāng)然，也不能考慮所有的瀏覽器，我們需要按照客戶需求來(lái)，如果可以確信瀏覽網(wǎng)站的用戶都使用或大部分使用IE瀏覽器，那么你大可放心的使用IE專有的那些豐富的擴(kuò)展，當(dāng)然，一旦用戶開(kāi)始轉(zhuǎn)向另一個(gè)瀏覽，那么痛苦的日子便開(kāi)始了。下面是市場(chǎng)上的主流瀏覽器列表：
Internet ExplorerMozilla FirefoxGoogle ChromeOperaSafari注意，瀏覽器總是不斷更新，我們不但要為多種瀏覽器作兼容處理，還要對(duì)同一瀏覽器多個(gè)版本作兼容處理。比如IE瀏覽器，其6.0版本和7.0版本都很流行，因?yàn)槲④汭E隨著操作系統(tǒng)綁定安裝（之前也是同步發(fā)行，微軟平均每?jī)赡晖瞥鲆豢顐€(gè)人桌面，同樣IE也每?jī)赡旮乱淮危恢钡浆F(xiàn)在，由于火狐的流行，IE工作組才加快IE的更新），所以更新的較慢，6.0版和7.0版有很大差別。
市場(chǎng)上還存在一些其它瀏覽器，但由于它們都是使用的上面所列瀏覽器的核心，或與上面瀏覽器使用了相同的解釋引擎，所以無(wú)需多作考慮。下面是主流的瀏覽器解釋引擎列表：
TridentTrident （又稱為MSHTML），是微軟的窗口操作系統(tǒng)（Windows）搭載的網(wǎng)頁(yè)瀏覽器—Internet Explorer的排版引擎的名稱，它的第一個(gè)版本隨著1997年10月Internet Explorer第四版釋出，之后不斷的加入新的技術(shù)并隨著新版本的Internet Explorer釋出。在未來(lái)最新的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是一模一樣的！
Gecko壁虎，英文為"Gecko"。Gecko是由Mozilla基金會(huì)開(kāi)發(fā)的布局引擎的名字。它原本叫作NGLayout。Gecko的作用是讀取諸如HTML、CSS、XUL和JavaScript等的網(wǎng)頁(yè)內(nèi)容，并呈現(xiàn)到用戶屏幕或打印出來(lái)。Gecko已經(jīng)被許多應(yīng)用程序所使用，包括若干瀏覽器，例如Firefox、Mozilla Suite、Camino,Seamonkey等等
PrestoPresto是一個(gè)由Opera Software開(kāi)發(fā)的瀏覽器排版引擎，供Opera 7.0及以上使用。Presto取代了舊版Opera 4至6版本使用的Elektra排版引擎，包括加入動(dòng)態(tài)功能，例如網(wǎng)頁(yè)或其部分可隨著DOM及Script語(yǔ)法的事件而重新排版。Presto在推出后不斷有更新版本推出，使不少錯(cuò)誤得以修正，以及閱讀Javascript效能得以最佳化，并成為速度最快的引擎。
KHTML是HTML網(wǎng)頁(yè)排版引擎之一，由KDE所開(kāi)發(fā)。KDE系統(tǒng)自KDE2版起，在檔案及網(wǎng)頁(yè)瀏覽器使用了KHTML引擎。該引擎以C++編程語(yǔ)言所寫(xiě)，并以LGPL授權(quán)，支援大多數(shù)網(wǎng)頁(yè)瀏覽標(biāo)準(zhǔn)。由于微軟的Internet Explorer的占有率相當(dāng)高，不少以FrontPage制作的網(wǎng)頁(yè)均包含只有IE才能讀取的非標(biāo)準(zhǔn)語(yǔ)法，為了使KHTML引擎可呈現(xiàn)的網(wǎng)頁(yè)達(dá)到最多，部分IE專屬的語(yǔ)法也一并支援。目前使用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 };
但這樣做并不是萬(wàn)無(wú)一失的，一個(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è)瀏覽器是沒(méi)有必要的，檢測(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 };
新聞熱點(diǎn)
疑難解答
圖片精選
