六角學院｜Browser Object Model (BOM)

Browser Object Model (BOM)

JS如何針對瀏覽器去做操作？

開啟(chrome)瀏覽器,意即當你開啟一個網頁;

除了針對網頁去做操作,甚至可以操控整個瀏覽器或著得知瀏覽器當中的資訊.

↓

(同時就會開啟一個window的物件;)

↓

(常見如下)

history:你瀏覽的歷史紀錄.

frames:你的網頁有沒有iframe(框架),其可以針對iframe去做操控.

location:針對妳目前的網址資訊去做調整.

DOM:針對document去操作裡面的dom元素.

screen:了解東西的大小、使用的載具、東西的寬高是多少.

navigator:你現在使用的是什麼瀏覽器、還有他是什麼版本.

history→回到上一頁的按鈕

windows.history.forward()

範例:

列印

document.getElementById('print').onclick = function (){

window.print()

}

多使用在票卷、QR Code、訂單資訊、發票

瀏覽location資訊

document.getElementById('locat').onclick = function () {

console.log(location)

}

也等於

document.getElementById('locat').onclick = function () {

console.log(window.location)

}

可撈出自己想要的詳細資訊

chrome瀏覽器轉跳輸入:

window.href = 'http://www.google.com.tw'

移動到google(首頁另開新視窗)

document.getElementById('open').onclick = function () {

window.open('http://www.google.com.tw')

}

open可以帶更多參數,例如另開新視窗時高度寬度設定多少數值