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

简短回答：你不能。

更长的回答：对于相当明显的安全＆＃34;当用户试图离开页面/关闭标签或以任何其他方式离开网站时，您可以做的事情非常有限。

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

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

某些浏览器允许您指定消息，而其他浏览器（包括firefox）甚至不允许您更改消息（因为您可能会通过询问＆＃34欺骗用户;我可以采用您未出生的儿子吗？＆＃34 ;）... AFAIK大多数浏览器允许您将另外的字符串指定为无法更改的标准消息。有些浏览器（没有主要的桌面浏览器）甚至完全没有这个事件。

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

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

我偶然发现this来自那个花费了大量时间试图阻止甚至可以添加的烦恼的用户的论坛问题 - 一个简短的摘录：


我不喜欢onunload和onbeforeunload。我不认为他们应该这样做   永远会在我的firefox安装上被解雇。我认为没有   这些事件的有用应用，甚至不是你所拥有的好处   未得救的工作！＆＃34;弹出窗口。当我告诉我的网络浏览器关闭网页时，   我不希望网页阻止（或延迟）浏览器   关闭它 - 完全没有。

只是添加一点官方信息：

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

不可能有自定义弹出窗口，请参见指定的链接

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

3 个答案: