jQuery beforeunload 自定义弹出窗口用于离开页面

您好，我想自定义离开页面的弹出窗口，有什么简单的方法可以做到这一点吗？

我正在使用简单的 jQuery

$(document).ready(function() {
    var myPopUp = $('#pop-up').css('display', 'block');
    $(window).bind('beforeunload', function(){
      return 'load my pop up here instead of the default browser message';
    });
});

我的弹出窗口的 html 是默认隐藏的

<div id="pop-up">
  <h2>Are you sure wanna leave</h2>
  <a href="#">Leave</a>
  <a href="#" class="close">Stay</a>
</div>

Thanks

简短回答：你不能.

更长的答案： 由于相当明显的“安全”原因，当用户尝试离开页面/关闭选项卡或以任何其他方式离开网站时，您可以执行的操作非常有限。

原因是浏览器想要绝对确保您无法阻止用户关闭他/她的选项卡或窗口wants关闭.

因此onbeforeunloadjavascript 事件 - 以及扩展beforeunloadjQuery 事件 - 它们能做的事情极其有限。他们肯定的事情之一cannot要做的就是阻止页面关闭 - 除非使用浏览器（通常）允许的一种非常标准化且相当无聊的方法。

有些浏览器允许您指定一条消息，而其他浏览器（包括 Firefox）甚至不允许您更改该消息（因为您可能会通过询问“我可以收养您未出生的儿子吗？”来欺骗用户）...据我所知，大多数浏览器都允许您指定您选择的字符串此外为无法更改的标准消息。有些浏览器（不是主要的桌面浏览器）甚至完全没有该事件。

您想要实现的基本上是强迫用户留在您的页面上，然后显示一个漂亮的弹出窗口，要求他们确认......虽然这在很多情况下肯定可以改善用户体验，但您并没有这样做不必费力去想象如何滥用它来根本不允许用户离开。

想想破坏后退按钮的网站是多么烦人，然后想象一下它们甚至可以消除您关闭选项卡的能力！

我偶然发现来自一位用户的相当有趣的论坛问题，他花费了大量的时间试图防止哪怕是一点点的烦恼can添加 - 简短摘录：

我不喜欢 onunload 和 onbeforeunload。我认为他们不应该 曾经在我安装的 Firefox 上被解雇过。我不认为有任何 这些事件的有用应用，甚至不是仁慈的“你有 未保存的工作！”弹出窗口。当我告诉我的网络浏览器关闭网页时， 我不希望网页阻止（或延迟）浏览器 永远关闭它。

只是添加一点官方信息：

mozilla.org：WindowEventHandlers.onbeforeunload https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload:

自 2011 年 5 月 25 日起，HTML5 规范规定调用 window.alert()、window.confirm() 和 window.prompt() 方法可能是 在此事件期间被忽略。有关更多信息，请参阅 HTML5 规范 细节。