在Chrome和IE中使用jQuery在body元素上设置onbeforeunload

我有一个系统，我想检查用户，如果他们确定他们想离开页面，一旦脏标志设置。

我使用下面的代码 – 在FireFox中，我可以通过FireBug查看页面源代码，并且标记正确地插入了onbeforeunload属性。

在Chrome和FireFox中，这种情况并没有发生，而且我可以在没有任何警告的情况下离开页面。 更新body标签的jQuery行肯定是正在执行，它只是不执行它。

if ($("body").attr('onbeforeunload') == null) { if (window.event) { // IE and Chrome use this $("body").attr('onbeforeunload', 'CatchLeavePage(event)'); } else { // Firefox uses this $("body").attr('onbeforeunload', 'return false;CatchLeavePage(event)'); } } 

任何想法如何从这里开始？

Answer 1

您不能通过返回false来中止页面卸载。 您必须返回将显示给用户的string，并决定是否要离开或留在页面上（通过select“确定”或“取消”button），所以您需要编写代码这个：

  window.onbeforeunload = function() { return "Are you sure you want to leave this page bla bla bla?"; // you can make this dynamic, ofcourse... }; 

Answer 2

尝试这个

  <script type=\"text/javascript\"> var dont_confirm_leave = 0; //set dont_confirm_leave to 1 when you want the user to be able to leave withou confirmation var leave_message = 'You sure you want to leave?' function goodbye(e) { if(dont_confirm_leave!==1) { if(!e) e = window.event; //e.cancelBubble is supported by IE - this will kill the bubbling process. e.cancelBubble = true; e.returnValue = leave_message; //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } //return works for Chrome and Safari return leave_message; } } window.onbeforeunload=goodbye; </script> 

Answer 3

 window.onbeforeunload = function () { return 'Are you sure?' }; 

Answer 4

检查这个代码：

 var validNavigation = false; function wireUpEvents() { var dont_confirm_leave = 0; var leave_message = "You sure you want to leave ?"; function goodbye(e) { if (!validNavigation) { if (dont_confirm_leave !== 1) { if (!e) e = window.event; e.cancelBubble = true; e.returnValue = leave_message; //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } //return works for Chrome and Safari return leave_message; } } } window.onbeforeunload = goodbye; document.onkeydown = function () { switch (event.keyCode || e.which) { case 116 : //F5 button validNavigation = true; case 114 : //F5 button validNavigation = true; case 82 : //R button if (event.ctrlKey) { validNavigation = true; } case 13 : //Press enter 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(); }); 

Answer 5

这些脚本工作的很好，但是如果我想在用户确认窗口closures时触发AJAX调用呢？

我试过这个，但是如果用户点击“是，closures”或者“不在，留在这里”（在Firefox 38.x上试过），则会触发AJAX调用。

 function goodbye(e) { if (!validNavigation) { if (dont_confirm_leave !== 1) { if (!e) e = window.event; e.cancelBubble = true; e.returnValue = leave_message; //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } $.ajax({ async: false, url: "/launch-my-script.php" }); //return works for Chrome and Safari return leave_message; } } }