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

问题描述

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

Hi I would like to customize my pop up for leaving a page, is there any simple way to do that?

我正在使用简单的 jQuery

I am using simple 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 默认是隐藏的

my html for the pop up is which is hidden by default

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

谢谢

推荐答案

简答:你不能.

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

Longer answer:For rather obvious "security" reasons it is very limited what you can do when a user tries to navigate away from a page / close a tab or in any other way leave the site.

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

The reason is that browsers want to make absolutely sure that you cannot prevent the user from closing a tab or window that he / she wants to close.

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

Therefore the onbeforeunload javascript event - and by extension the beforeunload jQuery event - are extremely limited in what they can do. One of the things they definitely cannot do is prevent the page from closing - except using one very standardized and rather boring method the browser (usually) allows.

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

Some browsers allow you to specify a message, while others (including firefox) do not even allow you to change the message (because you might trick the user by asking "Can I adopt your unborn son?")... AFAIK most browsers allow you to specify a string of your choosing in addition to a standard message that cannot be changed. Some browsers (no major desktop browsers) even lack the event completely.

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

What you want to achieve is basically to force the user to stay on your page, and then show a nice pop-up asking them to confirm... and while this could definitely improve the user experience in a lot of cases, you don't have to think very hard to imagine how it could be abused to simply not allow the user to ever leave.

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

Think about how annoying sites that break the back-button are, then imagine they could even remove your ability to close a tab!

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

I stumbled on this rather amusing forum question from a user who has spent an extensive amount of time trying to prevent even what little annoyance can be added - a short excerpt:

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

只是补充一点官方信息:

And just to add a little bit of somewhat official information:

mozilla.org:WindowEventHandlers.onbeforeunload:

mozilla.org: WindowEventHandlers.onbeforeunload:

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

这篇关于jQuery beforeunload 用于离开页面的自定义弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！