BOM全稱是Browser Object Model,可以操作整個瀏覽器,或是得到瀏覽器的相關資訊。
當一開啟瀏覽器時,就會開啟window物件,開發者就可以利用window物件內建的函式,來操作和瀏覽器相關的各項操作,所以和BOM相關的指令,都是以window.
開頭。
BOM大致上可以分為幾種常用的功能:
和瀏覽歷史紀錄相關的部分,像是網頁上常用的上一頁按鈕,就可以利用history的內建函式back()
來完成。
ex:
window.history.back();
可以用按鈕和事件綁定,寫成回上頁的按鈕。
所有瀏覽器中的 iframe 相關,都屬於這個部分。
網址的相關資訊,皆可以使用location的內建函式完成。
ex:
window.location.href;
上面的程式碼可以知道使用者現在停留的網址。
同樣的程式碼,也可以使用在轉址上:
window.location.href="http://www.google.com";
或是使用.open()
,可以帶入更多參數,像是頁面開啟時狀態(開新視窗或開新分頁):
window.open("http://www.google.com");
DOM是BOM中最常使用的部分了,使用時可以省略最前面的window.
,以document.
直接開頭。
因為DOM也包含在BOM當中,因此在DOM所有操作,都可以在BOM中操作。
ex:
var str = "TEST";
console.log(str); //TEST
window.console.log(str); //TEST
載具的螢幕相關資訊,包括寬、高⋯⋯資訊,都能從screen內的相關函式知道。
ex:
window.screen.width; //螢幕寬度
window.screen.height: //螢幕高度
可以利用width
和height
分別得知螢幕現在的寬度與高度。
如果想知道瀏覽器本身的相關資訊,就要使用這個分類的相關函式。
ex:
navigator.onLine;
利用onLine
,可以知道瀏覽器是否是在線狀態,有沒有連上網路,這在填寫和送出表單時很好用。
其他的BOM相關操作,常見的還有:
window.print();
print()
可以讓使用者直接叫出列印面板,避免還需要從右鍵或其他地方的選單找到列印選項,這個功能常用在票券或訂單資訊⋯⋯等需要列印的時候。
innerHeight
常用在需要RWD滿版設計的時候使用,讓圖片或色塊背景滿版。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.banner {
background: black;
}
</style>
</head>
<body>
<div class="banner">
<!-- 裡面有用background放入的圖或色塊 -->
</div>
</body>
</html>
document.querySelector(".banner").style.height = window.innerHeight+"px";
也常和window.onresize
一起使用,讓設計更為靈活。
document.querySelector(".banner").style.height = window.innerHeight+"px";
window.onresize = function(){
document.querySelector(".banner").style.height = window.innerHeight+"px";
}
這段程式碼會發現window.innerHeight
寫了兩次,第一次是為了讓程式碼載入就能根據當前頁面調整成適合高度,第二次則是搭配window.onresize
,讓視窗調整時,背景會隨著視窗大小調整,使之一直達到滿版的效果。