在 JavaScript 中檢測瀏覽器或標籤頁關閉事件
Mehvish Ashiq
2023年10月12日
beforeunload 事件用於檢測瀏覽器或標籤頁是否正在關閉或網頁是否正在重新載入。
使用 beforeunload 事件檢測 JavaScript 中的瀏覽器或標籤頁關閉事件
beforeunload 事件提醒使用者。addEventListener() 函式在事件發生時監聽事件。
在解除安裝視窗及其資源之前，會觸發 beforeunload 事件。
HTML 程式碼 (index.html):
<!DOCTYPE html>
<html>
<head>
<title>
Detect Browser or Tab Closing Event in JavaScript
</title>
<script src = "./script.js"></script>
</head>
<body>
<h1>
Detect Browser or Tab Closing Event in JavaScript
</h1>
<p>
The beforeunload event is fired just
before the closing the tab or browser
window or reloading the page.
In modern web browsers, you may have
to interate with the web
page to get the confirmation dialog.
</p>
<form>
<textarea placeholder = "Write few words here to trigger an
interaction">
</textarea>
</form>
</body>
</html>
JavaScript 程式碼（script.js）：
window.addEventListener('beforeunload', function(e) {
e.preventDefault();
e.returnValue = '';
});
在這裡，preventDefault() 用於顯示彈出視窗以供進一步確認。使用者在這裡有兩個選擇，他們可以導航到另一個頁面或取消事件並保留在當前頁面上。
輸出：
你可能對為什麼我們必須填寫 <textarea> 以獲得所需結果有疑問。
在使用者與網頁互動之前，一些網路瀏覽器可能不會決定是否應該顯示確認對話。
通過這種方式，我們可以檢測到兩個事件，標籤頁關閉和關閉瀏覽器視窗。
作者： Mehvish Ashiq
