试图检测浏览器closures事件
我已经尝试了很多方法来通过jQuery或JavaScript来检测浏览器closures事件。 但是，不幸的是，我还没有能够发现closures。 onbeforeunload和onunload方法也不起作用。
我如何检测窗口close ， unload或beforeunload事件？
你有没有试过这个代码？
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中工作（即使在最新版本也）。 有关它的更多细节，请转到此主题。
参考各种文章，进行一些试验和错误testing，最后我发展了这个完美的理念。
这个想法是检测closures浏览器触发的卸载事件。 在这种情况下， 鼠标将不在窗口中，指向closuresbutton（'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函数将popup默认消息，以防需要自定义消息，然后在函数ConfirmLeave（）中返回要显示的文本，而不是空string。
在Linux chrome环境下尝试下面的代码。 在运行之前，确保jQuery被附加到文档中。
$(document).ready(function() { $(window).bind("beforeunload", function() { return confirm("Do you really want to close?"); }); });
简单的步骤如下：
- 打开http://jsfiddle.net/
- 在html，css或javascript框中input内容
- 尝试closures在铬中的标签
它应该显示下面的图片：
以下脚本会在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也会发生。
正如Phoenix所说，使用jQuery .bind方法，但是为了更多的浏览器兼容性，你应该返回一个String，
$(document).ready(function() { $(window).bind("beforeunload", function() { return "Do you really want to close?"; }); });
有关更多详细信息，请访问： developer.mozilla.org
您好，我有一个棘手的解决scheme，只适用于新的浏览器：
只要打开一个websocket到你的服务器，当用户closures窗口时，onclose事件将被触发
也许最好使用path检测鼠标。
在BrowserClosureNotice你有一个演示的例子和纯JavaScript库来做到这一点。
这不是完美的，但避免文档或鼠标事件的问题…
<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中，此消息未显示。
<!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>
这是用于当login用户closures浏览器或浏览器选项卡，它会自动注销用户帐户…
你可以尝试这样的事情。
<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>
当用户closures窗口时，callback将被触发。
