Question

我想检测浏览器/标签关闭事件。我试过＆＃34; beforeunload＆＃34;，＆＃34;卸载＆＃34;在jQuery和Javascript中都有。选项卡/浏览器关闭以及重新加载页面时的解决方案。

是否可以在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

这实际上是预期的。 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

Answer 2

我一直在努力与＃34;卸载＆＃34;和＆＃34; beforeunload＆＃34;检查选项卡关闭的事件，但如果页面使用文档中的任何链接或FORM提交刷新，则这些功能也会启动。所以我找到了以下代码，它对我有用。它可以防止在启动之前启动＆＃34;锚点击和FORM提交事件。

此代码的缺点是，如果用户按下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;

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

2 个答案: