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

Question

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

在jQuery/Javascript中是否可以检测选项卡/浏览器关闭事件？在重新装载时不会开火。

在“重新加载”和“选项卡/浏览器关闭”两种情况下，都需要执行以下操作

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

我也一直在与“卸载”和“卸载前”事件作斗争，以检查标签关闭，但如果页面使用文档中提交的任何链接或表格刷新，这些功能也会启动。所以我找到了下面这段代码，它对我有效。它将防止在锚点击和表格提交时启动“之前卸载”事件。

此代码的缺点是，它仍然无法区分用户是否按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 2

这实际上是意料之中的 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 Popup