Day 11 - BOM (Browser Object Model)

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);