iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
1
Modern Web

JS讀書筆記系列 第 11

JS讀書筆記30天 - Day11 BOM

  • 分享至 

  • xImage
  •  

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: //螢幕高度

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

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

內容參考課程範圍

  • 六角學院 JavaScript 入門篇 - 學徒的試煉 Section 12

上一篇
JS讀書筆記30天 - Day10 Local Storage
下一篇
JS讀書筆記30天 - Day12 JSON和API
系列文
JS讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言