javascript中如何檢測瀏覽器標簽關閉事件

Question

在 chrome 瀏覽器中單擊關閉選項卡圖標時嘗試調用瀏覽器選項卡關閉事件但不起作用。我想在關閉瀏覽器選項卡之前顯示警報消息。怎么做？

下面的代碼不起作用：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<script type="text/javascript">
    window.onbeforeunload = function(evt) {
        var message = "Are you sure?"; 
        /* InternetExplorer/Firefox*/
        var e = evt || window.event
        e.returnValue = message 
        /* WebKit browser */
        return message;
    }
</script>

<body>
 
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p> 

</body> 
</html>

Answer 1

在某些瀏覽器中，在此事件期間可能會忽略對 window.alert()、window.confirm() 和 window.prompt() 的調用。 有關詳細信息，請參閱 HTML 規范。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event

嘗試 console.log 並在控制台中選中“保留日志”。 你會看到它只是alert()在你的情況下不起作用

Answer 2

您實際上正在正確檢測選項卡關閉事件。 問題出在您的觸發操作上。 來自相關的 MDN 文檔：

為了防止不需要的彈出窗口，某些瀏覽器不會顯示在beforeunload事件處理程序中創建的提示，除非頁面已與之交互。 此外，有些根本不顯示它們。

這意味着您很難在關閉瀏覽器選項卡之前顯示警告消息，就像您說的那樣。 但是，您可以通過使用處理程序的return值來實現類似的目的。 再次引用文檔：

當此事件返回（或將 returnValue 屬性設置為）null 或未定義以外的值時，將提示用戶確認頁面卸載。 在舊版瀏覽器中，事件的返回值顯示在此對話框中。 從 Firefox 44、Chrome 51、Opera 38 和 Safari 9.1 開始，將顯示不受網頁控制的通用字符串，而不是返回的字符串。

有關詳細信息，請參閱其他問題Warn user before leaving web page with unsaved changes 。

Answer 3

為防止詐騙，瀏覽器會謹慎處理這些消息。 大多數人可以做的事情非常有限。 Chrome 顯示標准化消息“離開網站？您所做的更改可能無法保存。” 這是不可改變的afaik。 為此，只需使用：

  window.onbeforeunload = function () {
        return true;
    };

另一種方法是檢測鼠標何時離開 window。這是不一樣的，但離開視口通常是在關閉選項卡之前采取的操作。 您可以在鼠標離開 window 時檢測到該事件並觸發您喜歡的任何消息或彈出窗口。 我個人覺得這很煩人。

Answer 4

在 Chrome 瀏覽器中單擊關閉選項卡圖標時嘗試調用瀏覽器選項卡關閉事件但無法正常工作。我想在關閉瀏覽器選項卡之前顯示警報消息。怎么做？

下面的代碼不起作用：

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<script type="text/javascript">
    window.onbeforeunload = function(evt) {
        var message = "Are you sure?"; 
        /* InternetExplorer/Firefox*/
        var e = evt || window.event
        e.returnValue = message 
        /* WebKit browser */
        return message;
    }
</script>

<body>
 
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p> 

</body> 
</html>

javascript中如何檢測瀏覽器標簽關閉事件

問題描述

3 個解決方案

解決方案1
2 2020-08-06 16:33:47

解決方案2
1 2020-08-06 16:28:58

解決方案3
1 2020-08-06 16:36:35

解決方案4
0 2020-08-06 16:32:16

javascript中如何檢測瀏覽器標簽關閉事件

問題描述

3 個解決方案

解決方案1 2 2020-08-06 16:33:47

解決方案2 1 2020-08-06 16:28:58

解決方案3 1 2020-08-06 16:36:35

解決方案4 0 2020-08-06 16:32:16

解決方案1
2 2020-08-06 16:33:47

解決方案2
1 2020-08-06 16:28:58

解決方案3
1 2020-08-06 16:36:35

解決方案4
0 2020-08-06 16:32:16