jQuery UI 对话框 OnBeforeUnload

Posted 2023-03-06

【中文标题】jQuery UI 对话框 OnBeforeUnload

【英文标题】：jQuery UI Dialog OnBeforeUnload

【发布时间】：2010-12-25 18:06:08

【问题描述】：

我有一个小问题。我试图捕捉窗口的 OnUnLoad 事件并询问确认问题，如果用户决定他们想要留下那么很好，如果他们想要离开页面，那么他们将丢失所有未保存的数据。这是问题...

我正在使用 jQuery UI 对话框，当我将以下代码放在我的页面上时，我打开了对话框，当我单击浏览器上的后退按钮时，它永远不会弹出 msgbox。它只是刷新页面：

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

我使用的解决方案是一个帖子here。同样，如果我没有打开 jQuery UI 对话框，msgbox 将正常显示。如果我这样做了，那么它不会显示 msgbox，只会刷新页面。

有什么想法吗？

【问题讨论】：

您使用的是哪个浏览器？ onbeforeunload 事件未在 w3 标准中指定，因此某些标准严格的浏览器不支持它。众所周知的例子是 Opera。

IE8，在兼容模式下试了一下还是不行...

如何添加限定符？我希望此消息仅在用户对页面文本进行了一些修改时显示。

@Nicholas：这篇文章展示了如何通过调用函数来打开/关闭它：***.com/questions/1244535/…

FWIW，html5 规范声明浏览器不需要在 beforeunload 过程中支持“警报”-也许在您的示例中，浏览器仅支持某些特殊情况，而其他情况则不支持。无论如何，你在 beforeunload 事件中返回的是一个提示信息。浏览器负责离开或停留在页面上。见developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload和dev.w3.org/html5/spec-LC/history.html#unloading-documents

【参考方案1】：

对于 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>

【参考方案2】：

这对我有用：

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

【参考方案3】：

显示警报的正确方法是简单地返回一个字符串。不要自己调用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

【讨论】：

所以如果我返回一个字符串，我如何判断他们说的是确定还是取消？还是有关系？我实际上想要一个确认（'你是个白痴吗？'）；然后捕捉他们选择的结果。你知道我会从哪里开始吗？

如果他们点击取消，他们会停留在页面上。如果他们点击确定，他们就会离开页面。

但请阅读我的实际问题。如果 jQuery 对话框未打开，这可以正常工作。如果它是打开的，确认不会显示，页面只是刷新......

出于安全原因，浏览器不允许您自定义按钮或对话框的结果。关于 jQuery 对话框如何影响卸载事件，发布其余代码会有所帮助。

值得注意的是，FireFascist 3.5+ 不再显示 any 用户提供的文本。因此，如果您的网站返回“离开此页面将停止您正在收听的歌曲”，用户将看到，“该网站试图告诉您一些事情，因为我们已禁止它。也许您的数据没有保存？”。

【参考方案4】：

这对我有用

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

【参考方案5】：

您还可以通过提交特定表单来例外离开页面：

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

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

【参考方案6】：

jQuery API 明确表示不要绑定到 beforeunload，而应该直接绑定到 window.onbeforeunload，我只是遇到了一个非常糟糕的内存，部分原因是使用 jQuery 绑定到 beforeunload。

【讨论】：

你应该将你的参考链接到这个答案，它会给人们一个开始深入研究这个问题的地方。

据我所知，jQuery 的文档只是说：在 jQuery 1.5.1 和 1.6+ 中支持跨浏览器的 beforeunload 事件，但在 IE 中不支持 jQuery 1.5.2，因为回归。

-1 因为没有为“jQuery API ..说”链接源/参考。

@Thomas 你介意按照要求做并添加参考吗？

在这一点上可能并不重要，但我看到 IE 9 进入无限循环并在内存绑定到 iframe 中窗口的 beforeunload 的内存之外运行其进程空间。抱歉，我无法提供复制链接（不是因为缺乏尝试）。