jQuery UI对话框OnBeforeUnload

Question

我有一个小问题。我正试图捕获窗口的OnUnLoad事件，并询问确认问题，如果用户决定留下，则可以，如果他们想离开页面，则会丢失所有未保存的数据。以下是问题所在...... 我正在使用jQuery UI Dialog，当我将以下代码放在我的页面上时，我打开了Dialog，当我单击浏览器上的后退按钮时，它从未弹出msgbox。它只是刷新页面：

<script type="text/javascript"> 
    $(window).bind('beforeunload', function() { 
            alert('you are an idiot!'); 
        } 
    );
</script>

我使用的解决方案是从这里得来的。如果我没有打开jQuery UI对话框，那么消息框将正常显示。但如果我打开了对话框，则不会显示消息框，而是刷新页面。

有什么想法吗？

- clockwiseq

---

你使用的是哪个浏览器？onbeforeunload事件在w3标准中没有被指定，因此一些严格遵循标准的浏览器不支持它。著名的例子就是Opera。 - BalusC

IE8，我已经尝试了兼容模式，但仍然无法工作... - clockwiseq

我该如何添加一个限定词？我希望只有在用户对页面的文本进行了一些修改时才显示此消息。 - Nicholas

@Nicholas：这篇文章展示了如何通过调用函数来打开/关闭它：https://dev59.com/xHM_5IYBdhLWcg3ww18Q - Homer

值得一提的是，HTML5规范指出浏览器不需要在beforeunload过程中支持“alert” - 也许在您的示例中只有一些特殊情况得到了支持，而其他情况则没有。无论如何，在beforeunload事件中返回的是提示消息。浏览器会处理离开或停留在页面上的操作。请参见https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload和http://dev.w3.org/html5/spec-LC/history.html#unloading-documents。 - chiccodoro

Answer 1

正确的显示警报的方法是简单地返回一个字符串。不要自行调用alert()方法。

<script type="text/javascript">
    $(window).on('beforeunload', function() {
        if (iWantTo) {
            return 'you are an idiot!';
        }
    }); 
</script>

另请参阅：https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

- Jordan Ryan Moore

---

如果我要返回一个字符串，我该如何知道他们是选择了“确定”还是“取消”？或者这并不重要吗？实际上，我想要一个confirm('你是个白痴吗？')；然后捕获他们选择的结果。你有任何线索可以指导我从哪里开始吗？ - clockwiseq

如果他们点击“取消”，他们将留在页面上。如果他们点击“确定”，他们将离开页面。 - Jordan Ryan Moore

出于安全考虑，浏览器不允许您自定义按钮或对话框的结果。关于jQuery对话框如何影响卸载事件，请提供您代码的其余部分以便更好地理解。 - Jordan Ryan Moore

值得注意的是，FireFascist 3.5+不再显示任何用户提供的文本。因此，如果您的网站返回“离开此页面将停止您正在听的歌曲”，用户将看到“此网站正在尝试告诉您一些信息，但我们已经将其抑制。也许您的数据没有保存？”。 - Nick

这个不再起作用了 :( .. 在最新的Windows 7上测试了Firefox和Chrome - Jonathan Marzullo

Answer 2

您还可以为通过提交特定表单离开页面设置异常：

$(window).bind('beforeunload', function(){
    return "Do you really want to leave now?";
});

$("#form_id").submit(function(){
    $(window).unbind("beforeunload");
});

- Tomáš Mleziva

Answer 3

这对我有效

$(window).bind('beforeunload', function() {
      return 'Do you really want to leave?' ;
});

- lndr

Answer 4

这对我有效：

window.addEventListener("beforeunload", function(event) {
  event.returnValue = "You may have unsaved Data";
});

- Lazerbeak12345

Answer 5

jQuery API明确表示不要绑定beforeunload事件，而应该直接绑定到window.onbeforeunload事件。我刚刚遇到了一个非常严重的内存问题，部分原因是使用jQuery绑定beforeunload事件。

- Thomas

---

你应该在回答中加入参考链接，这将为读者提供深入了解问题的起点。 - Nick Larsen

据我所见，jQuery的文档只是说：beforeunload事件在jQuery 1.5.1和1.6+中得到了跨浏览器的支持，但由于回归问题，在IE中不支持jQuery 1.5.2。 - StriplingWarrior

由于没有提供“jQuery API ..说”的来源/参考链接，因此评分为-1。 - user166390

@Thomas，你能否按要求添加参考文献呢？ - chiccodoro

可能此时此刻并不重要，但我发现IE 9会进入一个无限循环，并且在iframe中绑定到window的beforeunload时会耗尽其进程空间内存。抱歉，我无法提供可复制的链接（并非由于缺乏尝试）。 - dtanders

Answer 6

对于 ASP.NET MVC，如果您想通过提交特定表单来离开页面并进行异常处理：

请设置表单 ID：

@using (Html.BeginForm("Create", "MgtJob", FormMethod.Post, new { id = "createjob" }))
{
  // Your code
}



<script type="text/javascript">

  // Without submit form
   $(window).bind('beforeunload', function () {
        if ($('input').val() !== '') {
            return "It looks like you have input you haven't submitted."
        }
    });

    // this will call before submit; and it will unbind beforeunload
    $(function () {
        $("#createjob").submit(function (event) {
            $(window).unbind("beforeunload");
        });
    });

</script>

- Mohammad Atiour Islam