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>

谢谢

- dikei

---

可能是重复的问题，参考如何覆盖OnBeforeUnload对话框并替换为自己的对话框？。 - Steve Chambers

Answer 1

短答案是：你不能。

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

原因在于浏览器希望确保您无法阻止用户关闭他/她想要关闭的标签页或窗口。

因此，onbeforeunload JavaScript事件 - 以及扩展的beforeunload jQuery事件 - 在其能够执行的操作方面极为有限。其中一件它们肯定不能做的事情是防止页面关闭 - 除了使用一个非常标准化和相当无聊的方法，浏览器（通常）允许之外。

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

你想要实现的基本上是强制用户停留在你的页面上，然后显示一个漂亮的弹出窗口询问他们是否确认...虽然这在很多情况下肯定可以改善用户体验，但你不必费太多心思就能想象它如何被滥用以简单地不允许用户离开。想想那些破坏后退按钮的网站有多烦人，然后想象一下它们甚至可以删除你关闭标签页的能力！我偶然发现了this一个非常有趣的论坛问题，一个用户花了大量时间尝试防止即使是可以添加的小烦恼-一个简短的摘录：

为了补充一些官方信息：

mozilla.org: WindowEventHandlers.onbeforeunload:

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

- Mikk3lRo

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>

- lifejuggler

---

设置 event.returnValue 对我有用。仅返回字符串不能触发在 Chrome 60.0.3112.78 中显示确认对话框。 - Daryl

Answer 3

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

无法创建自定义弹出窗口，请参见指定的链接。

- kishore kingmaker

---

看起来是可能的，如果你看一下其他框架，比如ExtJs，它们提供了这样的可能性。 - Vahid Hashemi