什么是BOM
BOM:Browser Object Model 是瀏覽器對(duì)象模型某残,瀏覽器對(duì)象模型提供了獨(dú)立與內(nèi)容的、可以與瀏覽器窗口進(jìn)行互動(dòng)的對(duì)象結(jié)構(gòu),BOM由多個(gè)對(duì)象構(gòu)成爵政,其中代表瀏覽器窗口的window對(duì)象是BOM的頂層對(duì)象碴裙,其他對(duì)象都是該對(duì)象的子對(duì)象钢悲。
目前主流瀏覽器介紹
IE——11: 國(guó)內(nèi)用得最多的IE瀏覽器,歷來對(duì)W3C標(biāo)準(zhǔn)支持差舔株。從IE10開始支持ES6標(biāo)準(zhǔn)莺琳;
Sarafi:Apple的Mac系統(tǒng)自帶的基于Webkit內(nèi)核的瀏覽器,從OS X 10.7 Lion自帶的6.1版本開始支持ES6载慈,目前最新的OS X 10.10 Yosemite自帶的Sarafi版本是8.x惭等,早已支持ES6;
Firefox:Mozilla自己研制的Gecko內(nèi)核和JavaScript引擎OdinMonkey办铡。早期的Firefox按版本發(fā)布辞做,后來終于聰明地學(xué)習(xí)Chrome的做法進(jìn)行自升級(jí)琳要,時(shí)刻保持最新;
移動(dòng)設(shè)備上目前iOS和Android兩大陣營(yíng)分別主要使用Apple的Safari和Google的Chrome秤茅,由于兩者都是Webkit核心稚补,結(jié)果HTML5首先在手機(jī)上全面普及(桌面絕對(duì)是Microsoft拖了后腿),對(duì)JavaScript的標(biāo)準(zhǔn)支持也很好嫂伞,最新版本均支持ES6孔厉。
這里為什么沒有說到360瀏覽器、搜狗瀏覽器呢帖努?其實(shí)這一類瀏覽器只是在以上列舉出來的瀏覽器的內(nèi)核基礎(chǔ)上撰豺,換了一個(gè)包裝,添加了一些個(gè)性功能而已拼余,本質(zhì)上并沒有什么區(qū)別污桦。
可以操作的BOM對(duì)象
window對(duì)象
所有瀏覽器都支持 window 對(duì)象。它表示瀏覽器窗口匙监。
所有 JavaScript 全局對(duì)象凡橱、函數(shù)以及變量均自動(dòng)成為 window 對(duì)象的成員。
全局變量是 window 對(duì)象的屬性亭姥。
全局函數(shù)是 window 對(duì)象的方法稼钩。
甚至 HTML DOM 的 document 也是 window 對(duì)象的屬性之一:
window.document.getElementById("header");
與此相同:
document.getElementById("header");
window尺寸
有三種方法能夠確定瀏覽器窗口的尺寸(瀏覽器的視口,不包括工具欄和滾動(dòng)條)达罗。
對(duì)于Internet Explorer坝撑、Chrome、Firefox粮揉、Opera 以及 Safari:
window.innerHeight - 瀏覽器窗口的內(nèi)部高度
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
對(duì)于 Internet Explorer 8巡李、7、6扶认、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
實(shí)用的 JavaScript 方案(涵蓋所有瀏覽器):
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="瀏覽器的內(nèi)部窗口寬度:" + w + "侨拦,高度:" + h + "。"
該例顯示瀏覽器窗口的高度和寬度:(不包括工具欄/滾動(dòng)條)
除此之外辐宾,還有一個(gè)outerWidth和outerHeight屬性狱从,可以獲取瀏覽器窗口的整個(gè)寬高。
其他操作window方法(不常用)
window.open() - 打開新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() - 移動(dòng)當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口的尺寸
navigator
navigator對(duì)象表示瀏覽器的信息叠纹,最常用的屬性包括:
navigator.appName:瀏覽器名稱矫夯;
navigator.appVersion:瀏覽器版本;
navigator.language:瀏覽器設(shè)置的語言吊洼;
navigator.platform:操作系統(tǒng)類型训貌;
navigator.userAgent:瀏覽器設(shè)定的User-Agent字符串。
window.navigator 對(duì)象在編寫時(shí)可不使用 window 這個(gè)前綴。
示例:
txt = "
Browser CodeName: " + navigator.appCodeName + "
";txt+= "
Browser Name: " + navigator.appName + "
";txt+= "
Browser Version: " + navigator.appVersion + "
";txt+= "
Cookies Enabled: " + navigator.cookieEnabled + "
";txt+= "
Platform: " + navigator.platform + "
";txt+= "
User-agent header: " + navigator.userAgent + "
";txt+= "
User-agent language: " + navigator.systemLanguage + "
";document.getElementById("example").innerHTML=txt;
注意
來自 navigator 對(duì)象的信息具有誤導(dǎo)性递沪,不應(yīng)該被用于檢測(cè)瀏覽器版本豺鼻,這是因?yàn)椋?/p>
navigator 數(shù)據(jù)可被瀏覽器使用者更改
瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)
screen
screen對(duì)象表示屏幕的信息,常用的屬性有:
screen.width:屏幕寬度款慨,以像素為單位儒飒;
screen.availWidth:屏幕的可用寬度,以像素為單位
screen.height:屏幕高度檩奠,以像素為單位省核;
screen.availHeight:屏幕的可用高度齐鲤,以像素為單位
screen.colorDepth:返回顏色位數(shù)粪小,如8瘟判、16、24整胃。
window.screen 對(duì)象在編寫時(shí)可以不使用 window 這個(gè)前綴颗圣。
document.write( "屏幕寬度:"+screen.width+"px
" );
document.write( "屏幕高度:"+screen.height+"px
" );
document.write( "屏幕可用寬度:"+screen.availWidth+"px
" );
document.write( "屏幕可用高度:"+screen.availHeight+"px" );
Location
location對(duì)象表示當(dāng)前頁面的URL信息。例如屁使,一個(gè)完整的URL:
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href獲取:
document.write(location.href);
要獲得URL各個(gè)部分的值在岂,可以這么寫:
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加載一個(gè)新頁面,可以調(diào)用location.assign()蛮寂。如果要重新加載當(dāng)前頁面蔽午,調(diào)用location.reload()方法非常方便。
示例:加載一個(gè)新頁面
function newDoc()
{
window.location.assign("http://www.w3school.com.cn")
}
History
history對(duì)象保存了瀏覽器的歷史記錄酬蹋,JavaScript可以調(diào)用history對(duì)象的back()或forward ()及老,相當(dāng)于用戶點(diǎn)擊了瀏覽器的“后退”或“前進(jìn)”按鈕。
History Back
history.back() 方法加載歷史列表中的前一個(gè) URL除嘹。
這與在瀏覽器中點(diǎn)擊后退按鈕是相同的:
function goBack()
?{
?window.history.back()
?}
History Forward
history forward() 方法加載歷史列表中的下一個(gè) URL写半。
這與在瀏覽器中點(diǎn)擊前進(jìn)按鈕是相同的:
function goForward()
?{
?window.history.forward()
?}
注意
這個(gè)對(duì)象屬于歷史遺留對(duì)象岸蜗,對(duì)于現(xiàn)代Web頁面來說尉咕,由于大量使用AJAX和頁面交互,簡(jiǎn)單粗暴地調(diào)用history.back()可能會(huì)讓用戶感到非常憤怒璃岳。
新手開始設(shè)計(jì)Web頁面時(shí)喜歡在登錄頁登錄成功時(shí)調(diào)用history.back()年缎,試圖回到登錄前的頁面。這是一種錯(cuò)誤的方法铃慷。
任何情況单芜,你都不應(yīng)該使用history這個(gè)對(duì)象了。
拓展
系統(tǒng)對(duì)話框
alert()警告框犁柜,沒有返回值
confirm('提問的內(nèi)容')返回boolean
prompt(),輸入框,返回字符串或null
window對(duì)象常用事件
onload:當(dāng)頁面加載時(shí)
onscroll:當(dāng)頁面滾動(dòng)時(shí)
onresize:頁面重新定義大小時(shí)