我尝试了许多方法来通过jQuery或JavaScript检测浏览器关闭事件。但是，不幸的是，我无法检测到关闭。 onbeforeunload和onunload方法也不起作用。

如何检测窗口close，unload或beforeunload事件？

评论

我不想关闭浏览器，我想检测关闭事件。我试过的是window.onbeforeunload =函数（e）{var message =“您的确认消息在这里。”，e = e || window.event; //对于IE和Firefox，如果（e）{e.returnValue = message; } //对于Safari返回消息； };
“关闭”是指完全退出浏览器应用程序还是仅关闭选项卡或窗口？当然，根据浏览器的不同，关闭最后打开的选项卡或窗口的操作可能相同。但是，这仍然有助于弄清楚您的意思。
$（window）.unload（function（）{var e = confirm（“确定要退出吗？”）; if（e）{}}）
您无法检测到浏览器的关闭状态，只能检测当前文档的关闭状态。
浏览器窗口关闭事件的可能重复项

#1 楼

您尝试过此代码吗？

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中运行（即使在最新版本中也是如此）。有关它的更多详细信息，请转到此线程。

评论

@Ravi代码很好。但是，如果用户单击“离开此页面”，我想启动注销功能。但是，如何检测用户是否单击了“离开此页面”？

–Bit_hunter
15年8月1日在12:40
我不确定是否可行。据我所知这是不可能的。但是，您是否可以参考此答案发布新的问题，以便社区怎么说。

–拉维马利亚
15年8月3日，下午4:37
@Bit_hunter，您可以执行一个函数，其中显示一个自定义div，用户可以在其中按Yes或No

–黑色
16年4月12日在7:11
刷新页面时，是否有避免消息的方法？

– oracleruiz
16年6月20日在16:31
它不显示自定义消息，仅显示浏览器的消息默认值

–huykon225
17年7月5日在7:42

#2 楼

最终，我参考了各种文章并进行了一些试验和错误测试，然后开发出了一种对我来说非常合适的想法。

想法是检测关闭浏览器触发的卸载事件。在这种情况下，鼠标将离开窗口，指向关闭按钮（'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（）中的空字符串。

评论

当用户按下离开页面按钮时，启动ajax怎么办？如果不是，那可以替代它

– Aitazaz Khan
15年11月27日在14:49
我最喜欢的答案。这样可以避免列出所有可能导致您退出页面的DOM元素。除此之外，该代码还可以检测tab \ window关闭keyoard快捷方式。

– GigiSan
16年4月4日在15:10
嗨，希夫。除没有其他选项卡的ALT + F4以外，这在大多数情况下似乎都可以正常工作，即在浏览器中打开页面并按Alt + F4。这将关闭浏览器而不显示任何消息。 Ctrl + F4可以在相同的情况下工作。

–Milind Thakkar
16年8月1日在18:21
另外，如果您在该按钮的窗口不在窗口中的情况下向后或向前单击浏览器，则会触发该事件。 :-(

–Milind Thakkar
16年8月2日在6:12
该解决方案很好，但是就我而言，它似乎只有在浏览器中打开开发者控制台时才起作用。如果我单击页面（焦点在页面上），则它不起作用。任何想法，为什么会这样？

–拉胡尔·瓦拉（Rahul Vala）
2月20日19:24

#3 楼

在Linux chrome环境下，尝试以下代码对我有用。在运行之前，请确保将jquery附加到文档。

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


为简单起见，请执行以下步骤：


打开http：/ /jsfiddle.net/

在html，css或javascript框中输入内容
尝试关闭chrome中的标签页

它应显示以下图片：



评论

抱歉，在ubuntu中我没有Mozilla33。因此您可以查找jsfiddle的实现

– Khamidulla
2014年10月28日上午10:10
小提琴网址不再起作用。请检查并更新

– Shashank Vivek
17年1月22日在8:51
@ShashankVivek小提琴链接确实起作用。再次阅读答案。他们从Web UI的当前版本中删除了“ beforeunload”事件处理。因此，您将不再在jsfiddle中看到通知窗口。但是，使用脚本上部，您仍然可以自己处理事件。我无能为力。

– Khamidulla
17年1月23日在8:54
在卸载之前阻止了确认（“您真的要关闭吗？”）。

–阿敏·拉希米（Amin Rahimi）
18年7月9日在12:41

#4 楼

嗨，我有一个棘手的解决方案，该解决方案仅适用于新的浏览器：

只需打开服务器的Websocket，当用户关闭窗口时，就会触发onclose事件

评论

嗨，我们可以在此onclose事件上显示模式窗口/自定义弹出窗口吗？

– Jyoti Duhan
8月31日17:30
@JyotiDuhan不，您只能在服务器端检测到它

– wutzebaer
9月4日19:58


#5 楼

以下脚本将在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也会触发。

评论

我只想在用户关闭标签页或导航器以及Alt + F4时进行检测。

– Kiquenet
15年7月8日在10:31
@Kiquenet我刚刚在IE8上测试了Alt + f4，它确实触发了机制，在测试在所有浏览器（IE，Chrome，Firefox）上触发的Crome时，我一定做错了

–马塔斯·维特凯维奇（Matas Vaitkevicius）
15年7月8日在10:33


当用户按下离开页面按钮时，启动ajax怎么办？如果不是，那可以替代它

– Aitazaz Khan
15年11月27日在14:20
刷新页面时，是否有避免消息的方法？

– oracleruiz
16年6月20日在16:31
我当时想检测HTA应用程序的关闭事件，因此该解决方案非常有效。

–freginold
16-11-17在15:08

#6 楼

正如Phoenix所说，请使用jQuery .bind方法，但是要获得更多浏览器兼容性，您应该返回一个String。

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


更多详细信息可以在以下网站找到：developer.mozilla.org

#7 楼

jQuery .bind（）已被弃用。使用.on（）代替

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


#8 楼

也许最好使用路径检测鼠标。

在BrowserClosureNotice中，您有一个演示示例和纯JavaScript库来实现。

并不是完美的方法，但是可以避免出现问题文档或鼠标事件...

评论

如果用户只是将鼠标悬停在关闭按钮上却从不按下怎么办？以及如何处理移动浏览器上的情况？

–黑色
16年4月12日在7:18
该代码检测何时鼠标移至关闭按钮，但不检测何时按下关闭按钮。如果需要，您也可以添加此事件。就我而言，我不想避免关闭，如果我认为您正在考虑关闭页面，则想显示信息。

– manufosela
16年4月13日在9:42
但这无论如何都无法在移动浏览器上使用，因此解决方案不是鸡蛋般的黄色。

–黑色
16年4月14日在6:27
当然，这种方法不是移动浏览器的解决方案

– manufosela
16年4月15日在11:42

#9 楼

<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 楼

<!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>


用于登录的用户关闭浏览器或浏览器选项卡时，它将自动注销用户帐户...

评论

请分享一些解释为何有效以及如何有效

–托马斯·布拉塔尼奇（TomažBratanič）
17年3月31日在9:20
用于登录的用户关闭浏览器或浏览器选项卡时，它将自动注销用户帐户。并在数据库中进行更改。

– Ramesh kanna
17年3月31日在9:32

#11 楼

您可以尝试这样的操作。

<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>


当用户关闭窗口时，将触发回调。