iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 15
0
自我挑戰組

JavaScript基礎30天系列 第 15

BOM 基礎介紹 DAY15

今天要來介紹 BOM 啦!!
當然 我們必須先了解它是什麼東西/images/emoticon/emoticon37.gif

BOM (Browser Object Model)
瀏覽器提供的物件
讓你可以透過 JavaScript 直接跟瀏覽器溝通或做操作

https://ithelp.ithome.com.tw/upload/images/20200929/20123039UPeJnCTDHz.jpg
(圖片來源: https://www.htmlgoodies.com/beyond/javascript/using-built-in-javascript-code-with-javascript-objects.html)

先前我們所提到的 DOM
是針對整個網頁
但要注意的是
BOM 是針對瀏覽器並非整個網頁

上圖的 window 是我們打開瀏覽器後
就會開啟一個 window物件
https://ithelp.ithome.com.tw/upload/images/20200929/20123039Ll9Ijyx7uq.jpg

我們拿上圖的幾個例子來試看看

  • screen
    當我們按下 f12
    在console 裡面打 window.screen.width
    會呈現螢幕解析度的數值

  • location(針對目前網址資訊去做調整)
    我們開一個google首頁
    並輸入 location.href
    可以看到當前網頁的網址
    https://ithelp.ithome.com.tw/upload/images/20200929/20123039DPGoh2Gopu.jpg

  • history
    瀏覽的歷史紀錄

  • frames
    針對網頁的iframe來操作

  • document
    針對 DOM元素

  • navigator
    針對瀏覽器版本 或 瀏覽器資訊
    https://ithelp.ithome.com.tw/upload/images/20200929/20123039kUNu0tuBSz.jpg
    上圖的 onLine 為有網路
    若斷網 onLine 則會顯示 false


回上頁功能實作

index1
https://ithelp.ithome.com.tw/upload/images/20200929/20123039jIL030CR7T.jpg

index2
https://ithelp.ithome.com.tw/upload/images/20200929/20123039t79jE0sAHs.jpg

這裡會發現
第一次點擊 下一頁JS版 無法到第二頁是正常的
原因是 window.history.forward() 是在歷史紀錄中往下一頁
如果沒有先點擊「連到第二頁」跳轉到 b.html 這個頁面的話
自然也就沒有 b.html 這個頁面的紀錄
所以點擊「下一頁JS版」才會沒有反應


透過 JS 設計列印功能
CodePen: https://codepen.io/wemyferb/pen/NWNVGOa?editors=1010


動態擷取瀏覽器高度 (innerHeight)

CodePen: https://codepen.io/wemyferb/pen/WNwBrQy
window.onresize 若瀏覽器有調整高度 則banner也會自適應高度

今天的 BOM 就介紹到此
明天我們將會介紹
非常好玩的 AJAX
超期待!!!/images/emoticon/emoticon07.gif
記得持續關注唷!!


上一篇
localStorage 基礎介紹 DAY14
下一篇
AJAX 基礎介紹(1) DAY16
系列文
JavaScript基礎30天30

尚未有邦友留言

立即登入留言