在 JavaScript 中檢測瀏覽器或標籤頁關閉事件

Mehvish Ashiq 2022年5月1日
在 JavaScript 中檢測瀏覽器或標籤頁關閉事件

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() 用於顯示彈出視窗以供進一步確認。使用者在這裡有兩個選擇,他們可以導航到另一個頁面或取消事件並保留在當前頁面上。

輸出:

在 javascript 中檢測瀏覽器或標籤關閉事件 - 輸出

你可能對為什麼我們必須填寫 <textarea> 以獲得所需結果有疑問。

在使用者與網頁互動之前,一些網路瀏覽器可能不會決定是否應該顯示確認對話。

通過這種方式,我們可以檢測到兩個事件,標籤頁關閉和關閉瀏覽器視窗。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Event