bom操作

什么是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í)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末洲鸠,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌扒腕,老刑警劉巖绢淀,帶你破解...
    沈念sama閱讀 222,183評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異瘾腰,居然都是意外死亡皆的,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蹋盆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來费薄,“玉大人,你說我怎么就攤上這事栖雾±懵眨” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評(píng)論 0 361
  • 文/不壞的土叔 我叫張陵岩灭,是天一觀的道長(zhǎng)拌倍。 經(jīng)常有香客問我,道長(zhǎng)噪径,這世上最難降的妖魔是什么柱恤? 我笑而不...
    開封第一講書人閱讀 59,854評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮找爱,結(jié)果婚禮上梗顺,老公的妹妹穿的比我還像新娘。我一直安慰自己车摄,他們只是感情好寺谤,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,871評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著吮播,像睡著了一般变屁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上意狠,一...
    開封第一講書人閱讀 52,457評(píng)論 1 311
  • 那天粟关,我揣著相機(jī)與錄音,去河邊找鬼环戈。 笑死闷板,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的院塞。 我是一名探鬼主播遮晚,決...
    沈念sama閱讀 40,999評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼拦止!你這毒婦竟也來了县遣?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎萧求,沒想到半個(gè)月后括蝠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,465評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡饭聚,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,543評(píng)論 3 342
  • 正文 我和宋清朗相戀三年忌警,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片秒梳。...
    茶點(diǎn)故事閱讀 40,675評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡法绵,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出酪碘,到底是詐尸還是另有隱情朋譬,我是刑警寧澤,帶...
    沈念sama閱讀 36,354評(píng)論 5 351
  • 正文 年R本政府宣布兴垦,位于F島的核電站徙赢,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏探越。R本人自食惡果不足惜狡赐,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,029評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望钦幔。 院中可真熱鬧枕屉,春花似錦、人聲如沸鲤氢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卷玉。三九已至哨颂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間相种,已是汗流浹背威恼。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蚂子,地道東北人沃测。 一個(gè)月前我還...
    沈念sama閱讀 49,091評(píng)論 3 378
  • 正文 我出身青樓缭黔,卻偏偏與公主長(zhǎng)得像食茎,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子馏谨,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,685評(píng)論 2 360

推薦閱讀更多精彩內(nèi)容

  • 什么是BOM BOM:Browser Object Model 是瀏覽器對(duì)象模型别渔,瀏覽器對(duì)象模型提供了獨(dú)立與內(nèi)容的...
    小全同學(xué)閱讀 2,350評(píng)論 0 10
  • window對(duì)象 document 對(duì) Document 對(duì)象的只讀引用。 navigat...
    森大叔閱讀 1,075評(píng)論 0 1
  • 什么是BOM BOM:Browser Object Model 是瀏覽器對(duì)象模型,瀏覽器對(duì)象模型提供了獨(dú)立與內(nèi)容的...
    LaBaby_閱讀 224評(píng)論 0 0
  • 一哎媚、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))喇伯,知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,777評(píng)論 0 8
  • MVC MVC(Model-View-Controller)是最老牌的的思想,老牌到4人幫的書里把它歸成了一種模式...
    i_蘇閱讀 1,366評(píng)論 0 2