# [JavaScript] window 物件

###### tags: `JavaScript`

> 在瀏覽器裡的 window 物件扮演著兩種角色：
> * ECMAScript 標準裡的「全域物件」 (Global Object)
> * JavaScript 用來與瀏覽器溝通的窗口
>
> [name=Kuro Hsu] [time=Dec 14, 2017 18:57] [重新認識 JavaScript: Day 11 前端工程師的主戰場：瀏覽器裡的 JavaScript](https://ithelp.ithome.com.tw/articles/10191666)

window 物件實作了 Window 介面，代表了一個包含 DOM 文件的視窗，其中的 document 屬性指向了視窗中載入的 Document 物件

## window 物件常用屬性、方法、事件
| 屬性 | 說明 |
| --- | --- |
| closed | 視窗是否關閉 |
| console | 控制台 |
| document | |
| frames | iFrame |
| [history](#history) | 曾到訪過的 URL 資料 |
| innerHeight / innerWidth | 視窗內的網頁內容 高度 / 寬度，包含 水平 / 垂直 捲軸 |
| localStorage | |
| [location](#loction) | 目前的網址資訊 |
| name | 視窗物件名稱 |
| [navigator](#navigator) | 瀏覽器資訊 |
| opener | 使用 window.open() 開啟的視窗 |
| outerHeight / outerWidth | 瀏覽器視窗的 高度 / 寬度 |

| 方法 | 說明 |
| --- | --- |
| alert() | 警告訊息 |
| blur() | 移除焦點 |
| close() | 關閉視窗 |
| confirm() | 確認訊息 |
| focus() | 成為焦點 |
| getComputedStyle() | 取得 CSS 屬性值 |
| open() | 開啟新視窗，可以設定較多細節 |
| print() | 列印 |
| prompt() | 提示訊息 |
| scrollTo() | 頁面滾動到指定位置 |
| setInterval() / clearInterval() | 設定 / 取消 計時器 |
| setTimeout() / clearTimeout() | 設定 / 取消 計時器 |

| 事件 | 說明 |
| --- | --- |
| beforeunload | 關閉、離開、重新整理網頁時觸發，會顯示提示訊息對話筐，但無法修改訊息內容 |
| error | document 或圖片載入錯誤時觸發 |
| load | 網頁資源（包含 CSS、JavaScript、iframe、圖片等）全部載入後觸發 |
| resize | 瀏覽器尺寸變更時觸發 |
| unload | Deprecated，避免使用，在行動裝置上可能不會觸發 |

## history
:::info
* [Window: history property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/history)
:::
* 考量安全因素，無法取得瀏覽歷史的詳細網址

| 屬性 | 說明 |
| --- | --- |
| length | 目前瀏覽歷史的總數 |

| 方法 | 說明 |
| --- | --- |
| back() | 歷史紀錄上一頁 |
| forward() | 歷史紀錄下一頁 |
| go(number) | 指定至歷史紀錄特定紀錄，以目前頁面（index 0）的相對位置|
| pushState() | 加入歷史紀錄 |
| replaceState() | 修改歷史紀錄 |

history.go(-1); // 等同 history.back();
history.go(1); // 等同 history.forward(); 
history.go(0); // 等同 location.reload();

## loction
:::info
* [Window: location property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/location)
:::

// 屬性
// 假設目前頁面網址是：https://localhost:8080/zh-TW/product.html?id=A001#test

location.href; // 'https://localhost:8080/zh-TW/product.html?id=A001#test'
location.origin; // 'https://localhost:8080'
location.protocol; // 'https:'
location.host; // 'localhost:8080'
location.hostname; // 'localhost'
location.port; // '8080'
location.pathname; // '/zh-TW/product.html'
location.search; // '?id=A001'
location.hash; // '#test'

// 若想解析網址，也可以透過 <a> 標籤
const link = document.createElement('a');
link.href = 'https://localhost:8080/zh-TW/product.html?id=A001#test';
link.origin; // 'https://localhost:8080'
link.pathname: // '/zh-TW/product.html'

| 方法 | 說明 |
| --- | --- |
| assign(url) | 換頁，瀏覽器歷史紀錄會留存替換前的頁面，可使用"上一頁"按鈕回到剛才的頁面 |
| reload(forcedReload) | 重新載入目前頁面<br>forcedReload值為 true 時，強制重載資源；若為 false 或空值，則可能會從緩存中讀取頁面 |
| replace(url) | 換頁，但瀏覽器歷史紀錄不會留存替換前的頁面，無法用"上一頁"按鈕回到剛才的頁面 |

## navigator
| 屬性 | 說明 |
| --- | --- |
| appCodeName | 瀏覽器 code 名稱，例：Mozilla |
| appName | 瀏覽器官方名稱，例：Netscape |
| appVersion | 瀏覽器版本資訊 |
| cookieEnabled | 是否支援 cookie，例：true |
| geolocation | 設備的位置訊息。需使用者授權 |
| language | 瀏覽器語言，例：zh-TW |
| onLine | 是否連線，例：true |
| userAgent | 用戶代理 |

| 方法 | 說明 |
| --- | --- |
| javaEnabled() | 是否支援 Java |

## 資料來源
* [Window - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window)
* [Window Object](https://www.w3schools.com/jsref/obj_window.asp "Window Object")
* [0 陷阱！0 誤解！8 天重新認識 JavaScript！ | 作者： 許國政 (Kuro)](https://www.drmaster.com.tw/bookinfo.asp?BookID=MP21913)

---

:::info
建立日期：2020-12-23
更新日期：2024-02-11
:::