---
# System prepended metadata

title: JS 入門 - BOM 瀏覽器物件模型
tags: [' Javascript', JS, ' BOM']

---

---
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。
![](https://i.imgur.com/bc9Apjc.png)

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

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

### window . navigator 瀏覽器版本
![](https://i.imgur.com/tMCDXrZ.png)

### window . history 回上一頁、到下一頁 
```typescript
document.querySelector('.back').onclick = function(){
  window.history.back();  // 回上一頁
}
```
```typescript
document.querySelector('.back').onclick = function(){
  window.history.forward();  // 到下一頁
}
```
![](https://i.imgur.com/kVpVYrS.png)

## window 功能應用

### window . print 列印此頁
常用在票券、QRcord、發票、訂單資訊的輸出。
點擊某元素即可列印的寫法： 指定 DOM
```typescript
document.getElementById('print').onclick = function(){
  window.print();
}
```
### window . location 提供當前網址位置
[location對象介紹](https://segmentfault.com/a/1190000004071304)
window.location.href = ' 網址 ' ( 在此頁直接跳轉網址 )
```typescript
document.getElementById('locat').onclick = function(){
  console.log(location);  // 在此頁直接跳轉網址
  window.location.href = 'http://google.com.tw';
}
```

### window . open 移動到指定的網址 (另開新視窗)
1. 有較多參數可以選擇。 EX: 可選擇 "另開新視窗" 的寬高度。
2. 第一個參數是網址以外，第二個參數不寫的話預設為另開視窗。
```typescript
document.getElementById('open').onclick = function(){
  window.open('http://google.com.tw');  // 會另開新視窗
}
```
### innerHeight 動態擷取瀏覽器高度
banner 背景圖可隨瀏覽器滿版 (不寫死高度，透過JS控制高度)
* window . innerHeight **瀏覽器視窗**高度 、 window . innerWidth **瀏覽器視窗**寬度
* window . outerHeight **整個瀏覽器**高度 、 window . outerWidth **整個瀏覽器**寬度
```typescript
// 在瀏覽器預設載入時先跑一次
document.querySelector('.banner').style.height = innerHeight+'px';
```
如果希望使用者拖動瀏覽器大小的同時，圖片高度也能跟著變化的話，要再加上 onresize() 方法去觸發函式
```typescript
window.onresize = function(){
 document.querySelector('.banner').style.height = innerHeight+'px';
}
```

![](https://i.imgur.com/jCfew2Y.png)



## :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>