重新加载时工作的选项卡/浏览器关闭事件

Question

我想检测浏览器/标签关闭事件。我在 jQuery 和 Javascript 中都尝试过“beforeunload”、“unload”等。选项卡/浏览器上的解决方案关闭以及重新加载页面时。

是否可以在 jQuery/Javascript 中检测 Tab/Browser 关闭事件？不会在重新加载时触发。

以下一些在重新加载和选项卡/浏览器关闭时工作

var inFormOrLink;

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

和

window.addEventListener("beforeunload", function (e) {
    var confirmationMessage = "werwerew";

    (e || window.event).returnValue = confirmationMessage;
    return confirmationMessage;                          
 });

Answer 1

当我需要在关闭选项卡之前发送 ajax（以及在所有其他情况下：页面刷新、后退按钮或浏览器关闭）时，我会使用此方法。但是如果你设置的时间足够大，你就可以确定你的代码在关闭标签页之前已经被执行了。

 window.addEventListener('beforeunload', function (e) {
  //Your code ........ajax call 

   var start = Date.now(), now = start;
   var delay = 200; // msec
   while (now - start < delay) {
       now = Date.now();
   }
   delete e['returnValue'];
 });

Answer 2

我也一直在努力使用“卸载”和“之前卸载”事件来检查选项卡是否关闭，但是如果使用文档中的任何链接或表单提交刷新页面，这些功能也会启动。所以我找到了以下代码，它对我有用。它将防止在 Anchor 点击和 FORM 提交时触发“beforeunload”事件。

此代码的缺点是它仍然无法区分用户是否按下 F5 或浏览器刷新按钮或返回按钮。但我希望它对您或任何其他人有所帮助。 :)

//Message you wish to display upon closing tab window
var exitmessage = 'Are you sure you want to leave the site?';

//Load Event fires up on every body load 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
        window.onload = func; 
} else { 
    window.onload = function() {
    if (oldonload) { 
        oldonload(); 
    }  func(); }
}
}

// Add a click event to a tag
function addClickEvent(a,i,func) { 
if (typeof a[i].onclick != 'function') { 
    a[i].onclick = func; 
} 
}

theBody = document.body; if (!theBody) {
theBody = document.getElementById("body"); 
if (!theBody) {
    theBody = document.getElementsByTagName("body")[0];
}
}

//Set a variable to prevent running the code on links visit or form submit
var PreventExit   = false;

//The actual function that works on tab close or when the beforeunload function is fired
function DisplayExit(){ 
if(PreventExit   == false){         
    PreventExit = true;

    //run whatever code you want to run here. We are just displaying an alert message       
    return exitmessage; 
} 
}

//Search for A tags and prevent running the unload event
var a = document.getElementsByTagName('A'); 
for (var i = 0; i < a.length; i++) { 
if(a[i].target !== '_blank') {
    addClickEvent(a,i, function(){ 
        PreventExit = true; 
    });
} else{
    addClickEvent(a,i, function(){ 
        PreventExit = false;
    });
}
}

disablelinksfunc = function(){
var a = document.getElementsByTagName('A'); 
for (var i = 0; i < a.length; i++) { 
    if(a[i].target !== '_blank') {
        addClickEvent(a,i, function(){ 
            PreventExit = true; });
    } else{
        addClickEvent(a,i, function(){ 
            PreventExit = false;
        });
    }
}
}
addLoadEvent(disablelinksfunc);


//Disable event to fire up on a FORM submit
disableformsfunc = function(){ 
var f = document.getElementsByTagName('FORM'); 
for (var i=0;i<f.length;i++){ 
    if (!f[i].onclick){ 
        f[i].onclick=function(){ 
            PreventExit = true; 
        } 
    }else if (!f[i].onsubmit){ 
        f[i].onsubmit=function(){ 
            PreventExit = true; 
        }
    }
}
}
addLoadEvent(disableformsfunc);


window.onbeforeunload = DisplayExit;

Answer 3

这实际上是预期的。 JavaScript 中的unload 事件检测到页面当前状态的任何更改。这意味着当您关闭页面或离开页面时，会触发该事件。您可以尝试在一定程度上区分用户是否单击以离开页面或浏览器关闭，但说实话，没有完美的方法来捕获浏览器关闭。以下函数在某种程度上做到了这一点

window.onbeforeunload = function (event) {
    var message = 'You are about to close the browser window';
    if (typeof event == 'undefined') {
        event = window.event;
    }
    if (event) {
        event.returnValue = message;
    }
    return message;
};

$(function () {
    $("a, button, input[type='submit']").click(function () {
        window.onbeforeunload = null;
    });
});

或者，如果您希望以更好的方式实现浏览器关闭功能，请选择JQuery Popups