---
title: 'JS 入門 - BOM 瀏覽器物件模型'
tags: JS, Javascript, BOM
description: 2021/01/27
---

JS 入門 -- BOM 瀏覽器物件模型 (Browser Object Model)
===

## 瀏覽器物件模型 (BOM)
* JavaScript ==可以透過 BOM 對**瀏覽器**進行各種操作==，包含開啟及關閉視窗、改變視窗大小、計時器、取得位址之類的。
* BOM 的核心是 window 物件，而 window 物件提供的特性主要為<span class="red"> document、location、navigator、screen、history 以及 frames。</span>

## 什麼是 window？
* 瀏覽器物件模型有著階層性的架構，最上層便是 **window 物件**，代表著**瀏覽器視窗**本身。
* 所有的 BOM 都可透過 window 來存取。window 物件的使用不須經過宣告，可以直接使用。
* 在 JavcaScript 中，所有的全域變數、函式、物件，其實都是屬於 window 物件。
* window 是全域物件，假設宣告了 var b =1 ，就可以在在全域物件（global object） window 底下找到屬性 b。

## window 功能
### window . screen 使用載具的寬、高度

### window . location 瀏覽器瀏覽網頁的相關資訊

### window . navigator 瀏覽器版本

### window . history 回上一頁、到下一頁

document.querySelector('.back').onclick = function(){
  window.history.back();  // 回上一頁
}

document.querySelector('.back').onclick = function(){
  window.history.forward();  // 到下一頁
}


## window 功能應用

### window . print 列印此頁
常用在票券、QRcord、發票、訂單資訊的輸出。
點擊某元素即可列印的寫法： 指定 DOM

document.getElementById('print').onclick = function(){
  window.print();
}

### window . location 提供當前網址位置
[location對象介紹](https://segmentfault.com/a/1190000004071304)
window.location.href = ' 網址 ' ( 在此頁直接跳轉網址 )

document.getElementById('locat').onclick = function(){
  console.log(location);  // 在此頁直接跳轉網址
  window.location.href = 'http://google.com.tw';
}

### window . open 移動到指定的網址 (另開新視窗)
1. 有較多參數可以選擇。 EX: 可選擇 "另開新視窗" 的寬高度。
2. 第一個參數是網址以外，第二個參數不寫的話預設為另開視窗。

document.getElementById('open').onclick = function(){
  window.open('http://google.com.tw');  // 會另開新視窗
}

### innerHeight 動態擷取瀏覽器高度
banner 背景圖可隨瀏覽器滿版 (不寫死高度，透過JS控制高度)
* window . innerHeight **瀏覽器視窗**高度 、 window . innerWidth **瀏覽器視窗**寬度
* window . outerHeight **整個瀏覽器**高度 、 window . outerWidth **整個瀏覽器**寬度

// 在瀏覽器預設載入時先跑一次
document.querySelector('.banner').style.height = innerHeight+'px';

如果希望使用者拖動瀏覽器大小的同時，圖片高度也能跟著變化的話，要再加上 onresize() 方法去觸發函式

window.onresize = function(){
 document.querySelector('.banner').style.height = innerHeight+'px';
}


## :memo: 相關參考文件
:::info
:bulb: [JS 內建物件 - 全域物件篇](https://ithelp.ithome.com.tw/articles/10214769)
:bulb: [BOM 、 DOM 的差別](https://ithelp.ithome.com.tw/articles/10235079)
:bulb: [BOM 、 DOM 筆記](https://www.happycoding.today/posts/43)
:::

<style>
.red {
color: red;
}
</style>