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

Question

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

我正在使用简单的 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>

谢谢

Answer 1

简答：你不能。

更长的答案： 出于相当明显的“安全”原因，当用户试图离开页面/关闭标签或以任何其他方式离开网站时，您可以做的事情非常有限。

原因是浏览器希望绝对确保您不能阻止用户关闭他/她想要关闭的选项卡或窗口。

因此，onbeforeunload javascript 事件 - 以及扩展的 beforeunload jQuery 事件 - 的功能极其有限。他们绝对不能做的一件事是阻止页面关闭 - 除非使用浏览器（通常）允许的一种非常标准化且相当无聊的方法。

某些浏览器允许您指定消息，而其他浏览器（包括 firefox）甚至不允许您更改消息（因为您可能会通过询问“我可以收养您未出生的儿子吗？”来欺骗用户）... AFAIK大多数浏览器允许您指定一个您选择的字符串除了到一个不能更改的标准消息。一些浏览器（没有主要的桌面浏览器）甚至完全没有这个事件。

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

想想破坏后退按钮的网站有多烦人，然后想象它们甚至可以消除您关闭标签的能力！

我偶然发现了this 一位用户提出的相当有趣的论坛问题，该用户花费了大量时间试图防止添加任何小麻烦 - 一小段摘录：

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

只是补充一点官方信息：

mozilla.org：WindowEventHandlers.onbeforeunload：

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

Answer 2

这个问题已经在几个 stackoverflow 帖子中被问到并得到了回答，例如one

如果您还可以详细说明离开“页面”的情况，您可能会得到一个更好，更正确的答案。 如果您想警告用户应该先保存，请查看链接的顶部帖子。如果您只是想在离开页面之前发出警告， 试试用户 Hunter 留下的这个答案：

<script type='text/javascript'>
function goodbye(e) {
    if(!e) e = window.event;
    //e.cancelBubble is supported by IE - this will kill the bubbling process.
    e.cancelBubble = true;
    e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog

    //e.stopPropagation works in Firefox.
    if (e.stopPropagation) {
        e.stopPropagation();
        e.preventDefault();
    }
}
window.onbeforeunload=goodbye; 

</script>

Answer 3

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

不可能有自定义弹出窗口查看指定的链接