EP.20 RE：從零開始的學習 JS 生活-第二十日之 BOM

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
轉生第二十日，這一篇將會來介紹 BOM。

前言

轉生第二十日，這一篇將會來介紹 BOM。

BOM

BOM 的全名是 Browser Object Model，中文是瀏覽器物件模型，那 BOM 是做什麼用的呢?首先 BOM 並沒有一定的官方標準，所以瀏覽器都可以自由的實現 BOM，但是大多瀏覽器都是一樣類似的 BOM，如果 DOM 是操控 HTML 的元素的話，那麼 BOM 就是操控瀏覽器的動作，當我們開啟瀏覽器時，瀏覽器就會建立一個 window 的東西，那這個 window 就是這一整個瀏覽器視窗，其中裡面也包含了 DOM。

window

也因為這樣子，所以我們可以透過 window 一些方法來控制 BOM，例如跳轉到另一個頁面、後退、前進又或者取得螢幕大小等等，當然彈跳視窗也是 BOM 的一種唷。

所以簡單來總結來講，DOM 操作網頁畫面，而 BOM 則是操作瀏覽器，所以接下來讓我們記錄一下有哪些常用的 BOM 操作。

常用的 BOM 操作

那常用的 BOM 有那些呢?最主要有這幾種

  • history - 上下頁跳轉切換
  • location - 跳轉網頁
  • DOM - 也就是 document
  • screen - 取得螢幕畫面高寬
  • navigator - 瀏覽器資訊
  • print - 開啟列印
  • innerHeight - 取得視窗高度
  • outerHeight - 取得瀏覽器視窗高度
  • close - 關閉當前瀏覽視窗 (目前比較少人使用了)

那麼接下來就來講一下實作語法怎麼寫吧~

history

上下頁的跳轉會搭配使用 .back() 以及 .forward()。

上一頁：

1
window.history.back();

下一頁：

1
window.history.forward();

當然還有一個方法可以使用，也就是 go()

上一頁：

1
window.history.go(-1);

下一頁：

1
window.history.go(1);

location

location 可以針對目前網址調整或跳轉：

1
window.location.href="https://www.google.com.tw/";

screen

取得目前螢幕狀況

1
window.screen

顯示瀏覽器資訊(這個就滿好玩的)

1
window.navigator

瀏覽器資訊

print

就是開啟瀏覽器列印的功能而已

1
window.print();

outerHeight

獲取瀏覽器高度通常會比較建議使用 outerHeight，因為 innerHeight 是以螢幕視窗作為計算(印象)，基本上這個滿常用於需要滿圖片滿版的網頁上。

1
window.outerHeight;

結尾

下一篇的 RE：從零開始的學習 JS 生活-第二十日 將會介紹 時間。