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

简答:你做不到.

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

原因是,浏览器要绝对确保你不能阻止用户关闭他/她一个标签或窗口要关闭.

因此,onbeforeunloadjavascript事件 - 以及beforeunloadjQuery事件的扩展- 在他们可以做的事情上非常有限.他们绝对不能做的事情之一是阻止页面关闭 - 除了使用浏览器(通常)允许的一种非常标准化且相当无聊的方法.

有些浏览器允许您指定消息,而其他浏览器(包括Firefox)甚至不允许您更改消息(因为您可能会通过询问"我可以采用您未出生的儿子吗？"来欺骗用户)... AFAIK大多数浏览器允许除了无法更改的标准消息之外,还要指定您选择的字符串.有些浏览器(没有主要的桌面浏览器)甚至完全没有这个事件.

你想要实现的目的基本上是强迫用户留在你的页面上,然后显示一个漂亮的弹出窗口,要求他们确认......虽然这在很多情况下肯定会改善用户体验,但你不要我必须非常难以想象,如果不允许用户离开它会如何被滥用.

想想破坏后退按钮的网站是多么烦人,然后想象他们甚至可以删除你关闭标签的能力!

我偶然发现这个相当有趣的论坛问题来自一个用户,他花了很多时间试图阻止甚至可以添加什么小麻烦- 一个简短的摘录:

我不喜欢onunload和onbeforeunload.我不认为他们应该在我的firefox安装上被解雇.我认为这些事件没有任何有用的应用,甚至没有"你有未得救的工作!"的好处.弹出窗口.当我告诉我的网络浏览器关闭网页时,我不希望网页阻止(或延迟)浏览器关闭它 - 完全没有.

只是添加一些有点官方信息:

mozilla.org:WindowEventHandlers.onbeforeunload:

自2011年5月25日起,HTML5规范声明在此事件期间可能会忽略对window.alert(),window.confirm()和window.prompt()方法的调用.有关更多详细信息,请参阅HTML5规范.

Answer 2

这个问题已经被问和几个计算器的帖子回答诸如这样一个

如果您还可以详细说明离开"页面"的情况,您可能会得到一个更好和正确的答案.如果您想警告用户应该保存,然后检查链接的顶部帖子.如果您只是想在离开页面前发出警告,请尝试用户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>