【JS】瀏覽器物件模型

BOM

發表於 2021-02-19 | 1 分鐘 | 178 個字

【JS】瀏覽器物件模型

BOM

發表於 2021-02-19 | 1 分鐘 | 178 個字

BOM(Browser Object Model)

瀏覽器(window)提供的物件原型。

名稱	中文
history	瀏覽歷史紀錄
frames	框架
location	路徑位置
document	DOM元素
screen	使用裝置資訊
navigator	版本資訊

回上頁

使用window.history.forward()，下一頁。

使用window.history.back()，回上頁。

回上頁前必須先下一頁

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// <-----html----->
button.nextBtn 下一頁
button.backBtn 回上頁

// <-----js----->
let nextBtn = document.querySelector(".nextBtn");
let backBtn = document.querySelector(".backBtn");

nextBtn.onclick = function(){
  window.history.forward();
}
backBtn.onclick = function(){
  window.history.back();
}

列印

1
2
3
4
5
6
7
8
9


// <-----html----->
button.printBtn 列印

// <-----js----->
let printBtn = document.querySelector(".printBtn");

printBtn.onclick = function(){
  window.print();
}

前往網址

window.open(“網址”)，會另開新視窗。

location.href=“網址”，使用當前視窗。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// <-----html----->
button.openBtn 前往網址1
button.hrefBtn 前往網址2

// <-----js----->
let openBtn = document.querySelector(".openBtn");
let hrefBtn = document.querySelector(".hrefBtn");

openBtn.onclick = function(){
  window.open("https://www.google.com.tw/");
}

hrefBtn.onclick = function(){
  location.href = "https://www.google.com.tw/";
}

瀏覽器高度

window.innerHeight，可以取得瀏覽器可視高度。

window.outerHeight，可以取得整個瀏覽器高度。

window.onresize，當拖動瀏覽器時觸發。

可以使圖片滿版整個頁面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// <-----html----->
.box

// <-----css----->
.box
  background-image: url(...)
  background-size: cover
  background-position: center center

// <-----js----->
let box = document.querySelector(".box");
window.onresize = functin(){
  box.style.height = window.innerHeigth+"px";
}

javaScript

其他相關