堆棧內存溢出
  簡體   English   中英

嘗試檢測瀏覽器關閉事件

[英]Trying to detect browser close event

 原文  2013-12-31 06:49:39  1   11    javascript/ jquery/ browser

問題描述

我嘗試了很多方法來通過 jQuery 或 JavaScript 檢測瀏覽器關閉事件。 但是，不幸的是，我無法檢測到關閉。 onbeforeunload和onunload方法也不起作用。

如何檢測窗口close 、 unload或beforeunload事件？

11 個解決方案

解決方案1
 86 已采納  2013-12-31 08:00:50

你試過這個代碼嗎？

window.onbeforeunload = function (event) {
    var message = 'Important: Please click on \'Save\' button to leave this page.';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a").not('#lnkLogOut').click(function () {
        window.onbeforeunload = null;
    });
    $(".btn").click(function () {
        window.onbeforeunload = null;
});
});

第二個函數是可選的，以避免在單擊#lnkLogOut和.btn元素時出現提示。

還有一件事，自定義提示在 Firefox 中不起作用（即使在最新版本中也是如此）。 有關它的更多詳細信息，請轉到此線程。

解決方案2
 52  2014-10-09 10:03:39

參考了各種文章並進行了一些反復試驗，最終我開發了這個非常適合我的想法。

這個想法是檢測關閉瀏覽器觸發的卸載事件。 在這種情況下，鼠標將移出窗口，指向關閉按鈕 ('X') 。

$(window).on('mouseover', (function () {
    window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
    window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
    return "";
}
var prevKey="";
$(document).keydown(function (e) {            
    if (e.key=="F5") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {                
        window.onbeforeunload = ConfirmLeave;   
    }
    else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
        window.onbeforeunload = ConfirmLeave;
    }
    else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
        window.onbeforeunload = ConfirmLeave;
    }
    prevKey = e.key.toUpperCase();
});

ConfirmLeave 函數將給出彈出的默認消息，以防需要自定義消息，然后在ConfirmLeave() 函數中返回要顯示的文本而不是空字符串。

解決方案3
 13  2013-12-31 07:03:24

在 Linux chrome 環境下嘗試以下代碼對我有用。 在運行之前確保 jquery 附加到文檔。

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return confirm("Do you really want to close?"); 
    });
});

對於簡單的遵循以下步驟：

  1. 打開http://jsfiddle.net/
  2. 在 html、css 或 javascript 框中輸入內容
  3. 嘗試在 chrome 中關閉標簽

它應該顯示以下圖片：

在此處輸入圖片說明

解決方案4
 10  2015-12-17 20:41:31

嗨，我有一個棘手的解決方案，它僅適用於新瀏覽器：

只需打開一個 websocket 到您的服務器，當用戶關閉窗口時，將觸發 onclose 事件

解決方案5
 4  2015-06-01 10:43:20

以下腳本將在 Chrome 和 IE 上給出消息：

<script>
window.onbeforeunload = function (e) {
// Your logic to prepare for 'Stay on this Page' goes here 

    return "Please click 'Stay on this Page' and we will give you candy";
};
</script>

鉻合金
在此處輸入圖片說明

IE
在此處輸入圖片說明

在 Firefox 上，您將收到通用消息

在此處輸入圖片說明

機制是同步的，所以沒有服務器調用延遲會起作用，你仍然可以准備一個像模態窗口這樣的機制，如果用戶決定留在頁面上，但沒有辦法阻止他離開。

在評論中回答問題

F5將再次觸發事件， Atl + F4也是如此。

解決方案6
 3  2015-12-09 10:27:03

正如 Phoenix 所說，使用 jQuery .bind 方法，但為了更好的瀏覽器兼容性，您應該返回一個字符串，

$(document).ready(function()
{
    $(window).bind("beforeunload", function() { 
        return "Do you really want to close?"; 
    });
});

可以在以下位置找到更多詳細信息： developer.mozilla.org

解決方案7
 2  2019-07-25 16:29:54

jQuery .bind()已被棄用。 使用.on()代替

$(window).on("beforeunload", function() {
    runBeforeClose();
});

解決方案8
 0  2015-05-26 14:01:24

也許最好使用路徑檢測鼠標。

在BrowserClosureNotice 中，您有一個演示示例和純 javascript 庫來完成它。

它並不完美，但要避免文檔或鼠標事件的問題......

解決方案9
 0  2015-06-26 10:43:56

<script type="text/javascript">
window.addEventListener("beforeunload", function (e) {

  var confirmationMessage = "Are you sure you want to leave this page without placing the order ?";
  (e || window.event).returnValue = confirmationMessage;
  return confirmationMessage;

});
</script>

請試試這個代碼，這對我來說很好用。 此自定義消息已進入 Chrome 瀏覽器，但在 Mozilla 中未顯示此消息。

解決方案10
 -1  2017-03-31 09:16:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">

var validNavigation = false;

function endSession() {
// Browser or broswer tab is closed
// Do sth here ...
alert("bye");
}

function wireUpEvents() {
/*
* For a list of events that triggers onbeforeunload on IE
* check http://msdn.microsoft.com/en-us/library/ms536907(VS.85).aspx
*/
window.onbeforeunload = function() {
  if (!validNavigation) {

            var ref="load";
      $.ajax({
            type: 'get',
            async: false,
            url: 'logout.php',
 data:
            {
                ref:ref               
            },
             success:function(data)
            {
                console.log(data);
            }
            });
     endSession();
  }
 }

// Attach the event keypress to exclude the F5 refresh
$(document).bind('keypress', function(e) {
if (e.keyCode == 116){
  validNavigation = true;
}
});

// Attach the event click for all links in the page
$("a").bind("click", function() {
validNavigation = true;
});

 // Attach the event submit for all forms in the page
 $("form").bind("submit", function() {
 validNavigation = true;
 });

 // Attach the event click for all inputs in the page
 $("input[type=submit]").bind("click", function() {
 validNavigation = true;
 });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
wireUpEvents();  
}); 
</script>

這用於當登錄用戶關閉瀏覽器或瀏覽器選項卡時，它將自動注銷用戶帳戶...

解決方案11
 -2  2013-12-31 07:36:27

你可以嘗試這樣的事情。

<html>
<head>
    <title>test</title>
    <script>
        function openChecking(){
            // alert("open");
            var width = Number(screen.width-(screen.width*0.25));  
            var height = Number(screen.height-(screen.height*0.25));
            var leftscr = Number((screen.width/2)-(width/2)); // center the window
            var topscr = Number((screen.height/2)-(height/2));
            var url = "";
            var title = 'popup';
            var properties = 'width='+width+', height='+height+', top='+topscr+', left='+leftscr;
            var popup = window.open(url, title, properties);
            var crono = window.setInterval(function() {
                if (popup.closed !== false) { // !== opera compatibility reasons
                    window.clearInterval(crono);
                    checkClosed();
                }
            }, 250); //we check if the window is closed every 1/4 second
        }   
        function checkClosed(){
            alert("closed!!");
            // do something
        }
    </script>    
</head>
<body>
    <button onclick="openChecking()">Click Me</button>
</body>
</html>

當用戶關閉窗口時，將觸發回調。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 檢測瀏覽器關閉事件 檢測移動瀏覽器關閉事件 想要檢測瀏覽器關閉事件？ 如何在 angular 6+ 中檢測瀏覽器關閉事件或選項卡關閉事件？ 如何檢測瀏覽器窗口/標簽關閉事件？ javascript中如何檢測瀏覽器標簽關閉事件 檢測瀏覽器關閉事件，但不在jQuery中刷新頁面 如何檢測 Firefox 中的瀏覽器關閉事件？ 如何使用 React js 檢測瀏覽器標簽關閉事件？ 在Internet Explorer中打開多個選項卡時檢測瀏覽器關閉事件
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM