BOM (Browser Object Model)

瀏覽器物件模型
JavaScript 與瀏覽器溝通的窗口，不涉及網頁內容。
BOM 的核心是 window 物件，而 window 物件提供的屬性主要為 document、location、navigator、screen、history 以及 frames。

Window

任何既有的東西都會被歸納在 window 的路徑裡面

var str = 3
window.str
//3

Screen

載具的資訊，若使用 device 模式操控，也可得到不同裝置當下的螢幕資訊

window.screen.width
//1536

Location

可得知目前瀏覽網頁的路徑及其他資訊

//查看當下網址
location.href
//"https://courses.hexschool.com/courses/js/lectures/11952534"

//改變當下瀏覽網頁的路徑到其他網址(此方法不會另開視窗)
location.href = "https://www.youtube.com"

navigator

瀏覽器版本及瀏覽器的相關資訊

//檢視網路狀態
navigator.onLine
//true
//若把網路關掉則會顯示false

History

window.history.forward()
根據瀏覽器的歷史紀錄到下一頁

<h1>第一頁</h1>
<a href="page2.html">連到第二頁</a>
<input type="button" id="next" value="到下一頁">

document.querySelector('#next').onclick = function () {
    window.history.forward();
}

window.history.back()
根據瀏覽器的歷史紀錄回上一頁

<h1>第二頁</h1>
<input type="button" id="back" value="回上頁">

document.querySelector('#back').onclick = function () {
    window.history.back();
}

print

window.print()
使用 JavaScript 綁定按鈕列印畫面

<input type="button" id="print" value="列印">

let print = document.querySelector('#print');
function printpage(){
  window.print();
}
print.addEventListener('click',printpage);

open

window.open() 到別的頁面，此方式可設多個參數，第一個參數是網址，第二個參數不寫的話預設為另開新視窗前往連結

<input type="button" id="open" value="移動到google">

let opengoogle = document.querySelector('#open');
function movetogoogle(){
 window.open('https://google.com');
}
opengoogle.addEventListener('click',movetogoogle);