BOM

瀏覽器功能探索

3 min readJul 15, 2020

BOM

Browser Object Model，利用 JavaScript 操作瀏覽器。可以透過 window 操控瀏覽器來讀取相關內容，也可以去變更裡面的資訊。

Window

跟 JavaScript 和瀏覽器有關的所有相關資訊，都會繼承在 window 物件裡，包含宣告的變數。

document.getElementById('print').onclick = function () {
 window.print();  // 列印
}document.getElementById('locat').onclick = function () {
 console.log(location);          // location 目前網頁的資訊   
 location.href = 'http://www.google.com.tw'; //目前頁面換址
}document.getElementById('open').onclick = function () {
 window.open('http://www.google.com.tw'); // 移動到給定的網址
}
//open可帶參數('連結的網址', 默認:開新視窗)

innerHeight 瀏覽器「裡面的畫面高度」。

outerHeight 當前整個瀏覽器的高度。

onresize 獲取當前視窗大小並立即更新，後面接一組function。

document.querySelector('.hero').style.height = window.innerHeight+"px"  //覽器預設載入的時候先跑過一次window.onresize = function(){ 
 document.querySelector('.hero').style.height =   window.innerHeight+"px"  //用 onresize 讓他立即觸發做更新大小
}

Screen

螢幕解析度的相關資訊。用 device 模式去做操控螢幕解析，也會隨之變更。

Location

目前瀏覽網頁的相關路徑等資訊。location.href 抓出當前網址。

History

瀏覽的歷史記錄。

window.history.forward() //到下一頁window.history.back();   //回上一頁

Frames

可以針對 iFrame 去做操控網頁。

DOM

針對 document 去操控裡面的 DOM 元素。

Navigator

現在的瀏覽器版本，還有瀏覽器的一些相關資訊。navigator.onLine == true（上線中）。navigator.onLine == false（離線中）。

BOM