BOM模型
瀏覽器對(duì)象模型（Browser Object Model），BOM對(duì)象是JavaScript的核心氓皱，該對(duì)象提供了與瀏覽器交互相關(guān)對(duì)象結(jié)構(gòu)路召。BOM由多個(gè)子對(duì)象組成，其核心為window對(duì)象波材，它是BOM的頂層對(duì)象股淡，表示在瀏覽器環(huán)境中的一個(gè)全局的頂級(jí)對(duì)象。除了window對(duì)象還具有frames各聘、navigator揣非、history、location躲因、screen早敬、document(DOM)忌傻。
window
window對(duì)象既是通過JavaScript訪問瀏覽器窗口的一個(gè)接口,又是ECMAScript規(guī)定的Gloal對(duì)象。
window.open() (返回打開的窗口的引用,即打開窗口的window對(duì)象)
- 第一個(gè)參數(shù):打開窗口的URL
- 第二個(gè)參數(shù):鏈接的目標(biāo),相當(dāng)于a標(biāo)簽的target,當(dāng)不存在target窗口時(shí),將會(huì)創(chuàng)建一個(gè)窗口,以第二個(gè)參數(shù)命名;也可使用_self搞监、_parent水孩、_top或_blank等具有意義的參數(shù)
- 第三個(gè)參數(shù):設(shè)置瀏覽器窗口的樣式,通過”,”分隔個(gè)屬性,并且只有第二個(gè)窗口創(chuàng)建一個(gè)新窗口才有效
- 第四個(gè)參數(shù):是否打開一個(gè)新窗口,默認(rèn)為是
原窗口以及彈窗有個(gè)屬性指向打開他的原始窗口opener
var newWin = window.open("http://www.abc.com","newWin");
newWin.opener = null ;
瀏覽器內(nèi)置程序屏蔽彈出窗口時(shí),window.open()返回空,擴(kuò)展程序阻止時(shí)會(huì)拋出錯(cuò)誤。因此可以通過檢測(cè)是否拋出異常,來判斷彈窗是否被屏蔽琐驴。
其他常用的全局函數(shù)還有:(超時(shí)調(diào)用)setTimeout/clearTimeout俘种；(間歇調(diào)用)setInterval/clearInterval；系統(tǒng)對(duì)話框(alert绝淡、prompt宙刘、confirm同步窗口，js執(zhí)行停止)牢酵；查找打印(print悬包、find異步窗口，js執(zhí)行不停止)
frames
對(duì)于使用框架集的頁面馍乙，每一個(gè)frame都擁有自己的window對(duì)象,并保存在frames集合中布近。
<html>
<head></head>
<frameset rows="16,*">
<frame src="frame.html" name="topFrame">
<frame src="anotherframe.html" name="leftFrame">
</frameset>
</html>
可通過索引或框架名來訪問。如:window.frames[“topFrame”],也可用top.frames[“topFrame”]進(jìn)行訪問
- top:指向最外層的window
- parent:父層的window
- self:始終指向window(都是window的屬性)
location
提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息,還提供了一些導(dǎo)航功能丝格。既是window對(duì)象的屬性,也是document對(duì)象的屬性
location對(duì)象具有以下屬性：
改變?yōu)g覽器位置方式：
- assign():立即打開url,并在瀏覽器中生成一條記錄(與給window.location設(shè)置url相同)
- replace():立即打開url,并且不生成歷史記錄當(dāng)前頁面的歷史記錄
- reload():重新加載當(dāng)前頁面,如果不傳遞true參數(shù),并且參數(shù)無變化,從緩存中加載撑瞧。
- 通過改變location的屬性,也會(huì)改變?yōu)g覽器位置
navigator
navigator對(duì)象用于識(shí)別客戶端瀏覽器
它具有很多與客戶端瀏覽器相關(guān)的信息，比如：
- appName 完整瀏覽器名
- appVersion 瀏覽器的版本
- cookieEnabled 表示cookie是否啟用
- javaEnabled() 表示當(dāng)前瀏覽器是否啟用了Java
- language 瀏覽器主語言
- onLine 瀏覽器是否連接到英特網(wǎng)
- plugins 瀏覽器中安裝的插件信息的數(shù)組
- registerContentHandler() 針對(duì)特定的MIME類型將一個(gè)站點(diǎn)注冊(cè)為處理程序
- registerProtocolHanlder() 針對(duì)特定的協(xié)議將一個(gè)站點(diǎn)注冊(cè)為處理程序
檢測(cè)插件(使用plugins數(shù)組)
//檢測(cè)是否存在插件
//IE以外的插件
function hasPlugin(name){
name = name.toLowerCase();
for(var i=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
return true;
}
}
return false;
}
//檢測(cè)IE中的插件
function hasIEPlugin(name){
try{
//參數(shù)name,插件對(duì)應(yīng)的COM對(duì)象的標(biāo)識(shí)符
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
注冊(cè)處理程序
//將http://www.somereader.com注冊(cè)為RSS源處理程序,%s表示RSS源URL
navigator.registerContentHandler("application/rss+xml","http://www.somereader.com?feed=%s","Some Reader");
//將http://www.somemailclient.com注冊(cè)為郵件處理程序,%s表示原始請(qǐng)求
navigator.registerProtocolHandler("mailto","http://www.somemailclient.com?cmd=%s","Some Mail Client");
history
history對(duì)象保存著用戶上網(wǎng)的歷史記錄,從窗口被打開的那一刻算起显蝌。
歷史記錄跳轉(zhuǎn)
- back():后退一頁,等價(jià)于go(-1)
- forword():前進(jìn)一頁,等價(jià)于go(1)
- go():前進(jìn)或后退任意一頁
- length屬性,保存著歷史記錄的數(shù)量预伺。加載到窗口、標(biāo)簽頁或框架中的第一個(gè)頁面history.length等于0,有些瀏覽器等于1
screen
screen對(duì)象中包含了用戶顯示器屏幕相關(guān)信息琅束。通過該對(duì)象扭屁，可以訪問用戶顯示器屏幕寬、高涩禀、色深等信息。
- colorDepth 表現(xiàn)顏色的位數(shù)
- height 屏幕的像素高度
- width 屏幕的像素寬度
document
DOM可以認(rèn)為是BOM的一個(gè)子集然眼，DOM中有關(guān)文檔操作相關(guān)對(duì)象艾船，如：Node、Document高每、Element等DOM節(jié)點(diǎn)類型對(duì)象屿岂，都是做為window對(duì)象的子屬性出現(xiàn)的。
document是window對(duì)象的了個(gè)屬性鲸匿，它是一個(gè)Document對(duì)象實(shí)例爷怀，表示當(dāng)前窗口中文檔對(duì)象。通過該對(duì)象带欢，可以對(duì)文檔和文檔中元素运授、節(jié)點(diǎn)等進(jìn)行操作烤惊。
其他
可視寬高
獲取頁面可視區(qū)域?qū)捀?/p>
jQuery
$(window).width();
$(window).height();
原生JS
//不同瀏覽器下,取得頁面視圖大小
var clientWidth = window.innerWidth,clientHeight = window.innerHeight;
if(typeof clientWidth != "number"){
//compatMode瀏覽器采用的渲染方式:BackCompact標(biāo)準(zhǔn)兼容模式關(guān)閉,CSS1Compat標(biāo)準(zhǔn)兼容模式開啟
if(document.compatMode == "CSS1Compat"){
// 在頁面指定了DOCTYPE時(shí)，需要使用這種方式來獲取寬高
clientWidth = document.documentElement.clientWidth;
clientHeight = document.documentElement.clientHeight;
}else{
//有些瀏覽器用于保存初始的布局視圖大小
clientWidth = document.body.clientWidth;
clientHeight = document.body.clientHeight;
}
}
在頁面指定了DOCTYPE時(shí)吁朦，需要使用document.documentElement這種方式來獲取寬高柒室，而不能使用document.body的方式來獲取
文檔寬高
獲取整個(gè)文檔的寬高
jQuery
$(document).height();
$(document).width();
原生JS
//compatMode瀏覽器采用的渲染方式:BackCompact標(biāo)準(zhǔn)兼容模式關(guān)閉,CSS1Compat標(biāo)準(zhǔn)兼容模式開啟
if(document.compatMode == "CSS1Compat"){
// 在頁面指定了DOCTYPE時(shí)，需要使用這種方式來獲取寬高
pageWidth = document.documentElement.scrollWidth;
pageHeight = document.documentElement.scrollHeight;
}else{
//有些瀏覽器用于保存初始的布局視圖大小
pageWidth = document.body.scrollWidth;
pageHeight = document.body.scrollHeight;
}
滾動(dòng)寬高
獲取滾動(dòng)條到頂部或左邊的寬度或高度
jQuery
$(document).scrollTop();
$(document).scrollLeft();
原生JS
//compatMode瀏覽器采用的渲染方式:BackCompact標(biāo)準(zhǔn)兼容模式關(guān)閉,CSS1Compat標(biāo)準(zhǔn)兼容模式開啟
if(document.compatMode == "CSS1Compat"){
// 在頁面指定了DOCTYPE時(shí)逗宜，需要使用這種方式來獲取寬高
scrollHeight = document.documentElement.scrollTop;
scrollWidth = document.documentElement.scrollLeft;
}else{
//有些瀏覽器用于保存初始的布局視圖大小
scrollHeight = document.body.scrollTop;
scrollWidth = document.body.scrollLeft;
}
參考文獻(xiàn)
JS高程(第三版)
JavaScript BOM對(duì)象
jQuery獲取寬高
js獲取寬高
