1. 引言
在網頁開發中，彈窗（Popup）是一種常見的交互方式，用于提示用戶進行操作、確認信息或展示關鍵內容。然而，傳統的 JavaScript 彈窗方法如 alert()、confirm() 和 prompt() 存在諸多問題，包括阻塞主線程、樣式不可定制等。
為了解決這些問題，Chrome 瀏覽器引入了 Close Watcher API，它允許開發者以更現代、非侵入式的方式管理模態對話框和彈窗行為。本文將深入探討該 API 的原理、使用方式，并通過豐富的代碼示例幫助你快速掌握這一新特性。
1.1 網頁彈窗的發展歷程
早期的 Web 頁面主要依賴瀏覽器內置的彈窗函數來與用戶進行交互：
alert("這是一個警告！");
let isConfirmed = confirm("你確定要繼續嗎？");
let name = prompt("請輸入你的名字：");
這些方法雖然簡單易用，但存在明顯的局限性：
- 樣式固定，無法自定義；
- 阻塞主線程，影響頁面性能；
- 不支持異步處理，用戶體驗較差。
隨著前端技術的發展，越來越多開發者選擇使用 <div> + CSS + JavaScript 來模擬彈窗，但這種方式需要大量手動控制顯示/隱藏邏輯。
1.2 JavaScript 彈窗的局限性
| 特性 | alert() / confirm() | 自定義彈窗 | Close Watcher API |
|---|---|---|---|
| 樣式定制 | ? | ? | ? |
| 非阻塞 | ? | ? | ? |
| 易用性 | ? | ? | ? |
| 異步支持 | ? | ? | ? |
1.3 Chrome 新特性：Close Watcher API 簡介
Close Watcher API 是一個實驗性 Web API，旨在提供一種輕量級的方式來監聽窗口關閉行為，并在適當的時候觸發模態對話框或彈窗。
核心功能特點
- 支持監聽窗口關閉事件（如點擊“X”按鈕）。
- 可用于
<dialog>元素，增強其交互能力。 - 減少對 JavaScript 的依賴，提升性能與安全性。
- 支持異步操作，避免阻塞主線程。
2. Close Watcher API 的工作原理
2.1 如何監聽窗口關閉行為
Close Watcher API 提供了一個新的構造函數 CloseWatcher，可以通過監聽 close 事件來響應用戶的關閉行為。
const watcher = new CloseWatcher();watcher.addEventListener('close', () => {console.log('用戶嘗試關閉窗口！');
});
2.2 與 <dialog> 結合使用
Close Watcher 可以與 HTML5 原生 <dialog> 元素結合使用，實現更加可控的彈窗體驗。
<dialog id="myDialog"><p>這是一個由 Close Watcher 控制的彈窗
》)
