EP.20 RE:從零開始的學習 JS 生活-第二十日之 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 生活-第二十日 將會介紹 時間。

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下(拍手),按讚過程你是完全不用付費的(除非你想要每個月贊助我 :D),你只需要登入帳號就可以開始按讚。
而 Liker 會依據按讚數量分配獎金給創作者,所以如果你願意按個讚我會非常感謝你唷。

Google AD

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