JS讀書筆記30天 - Day11 BOM - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 11

Modern Web

JS讀書筆記系列第 11 篇

JS讀書筆記30天 - Day11 BOM

12th鐵人賽

Camellus

2020-09-26 22:20:04

1097 瀏覽

分享至

BOM是什麼？

BOM全稱是Browser Object Model，可以操作整個瀏覽器，或是得到瀏覽器的相關資訊。

當一開啟瀏覽器時，就會開啟window物件，開發者就可以利用window物件內建的函式，來操作和瀏覽器相關的各項操作，所以和BOM相關的指令，都是以window.開頭。

BOM的相關操作

BOM大致上可以分為幾種常用的功能：

1. history

和瀏覽歷史紀錄相關的部分，像是網頁上常用的上一頁按鈕，就可以利用history的內建函式back()來完成。

ex：

window.history.back();

可以用按鈕和事件綁定，寫成回上頁的按鈕。

2. framer

所有瀏覽器中的 iframe 相關，都屬於這個部分。

3. location

網址的相關資訊，皆可以使用location的內建函式完成。

ex：

window.location.href;

上面的程式碼可以知道使用者現在停留的網址。

同樣的程式碼，也可以使用在轉址上：

window.location.href="http://www.google.com";

或是使用.open()，可以帶入更多參數，像是頁面開啟時狀態（開新視窗或開新分頁）：

window.open("http://www.google.com");

4. DOM

DOM是BOM中最常使用的部分了，使用時可以省略最前面的window.，以document.直接開頭。

因為DOM也包含在BOM當中，因此在DOM所有操作，都可以在BOM中操作。

ex：

var str = "TEST";
console.log(str); //TEST
window.console.log(str); //TEST

5. screen

載具的螢幕相關資訊，包括寬、高⋯⋯資訊，都能從screen內的相關函式知道。

ex：

window.screen.width; //螢幕寬度
window.screen.height: //螢幕高度

可以利用width和height分別得知螢幕現在的寬度與高度。

6. navigator

如果想知道瀏覽器本身的相關資訊，就要使用這個分類的相關函式。

ex：

navigator.onLine;

利用onLine，可以知道瀏覽器是否是在線狀態，有沒有連上網路，這在填寫和送出表單時很好用。

7. 其他

其他的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，讓視窗調整時，背景會隨著視窗大小調整，使之一直達到滿版的效果。