如何覆盖“OnBeforeUnload”对话框并将其替换为我自己的对话框？

javascript jquery onbeforeunload

2022-08-29 23:35:22

我需要在用户离开页面之前警告他们未保存的更改（这是一个非常常见的问题）。

window.onbeforeunload = handler

这有效，但它会引发一个默认对话框，其中包含一个令人讨厌的标准消息，该消息包装了我自己的文本。我需要完全替换标准消息，以便我的文本清晰，或者（甚至更好）使用jQuery将整个对话框替换为模式对话框。

到目前为止，我失败了，我还没有找到其他似乎有答案的人。这有可能吗？

Javascript在我的页面中：

<script type="text/javascript">   
    window.onbeforeunload = closeIt;
</script>

closeIt（）函数：

function closeIt()
{
  if (changes == "true" || files == "true")
  {
      return "Here you can append a custom message to the default dialog.";
  }
}

使用jQuery和jqModal，我尝试过这种事情（使用自定义确认对话框）：

$(window).beforeunload(function () {
    confirm('new message: ' + this.href + ' !', this.href);
    return false;
});

这也不起作用 - 我似乎无法绑定到事件。beforeunload

答案 1

您无法修改的默认对话框，因此最好的办法可能是使用它。onbeforeunload

window.onbeforeunload = function() {
    return 'You have unsaved changes!';
}

以下是微软对此的引用：

将字符串分配给 window.event 的 returnValue 属性时，将出现一个对话框，为用户提供保留在当前页面上并保留分配给它的字符串的选项。对话框中显示的默认语句“是否确实要离开此页面？...按“确定”继续，或按“取消”停留在当前页面上。“，无法删除或更改。

问题似乎是：

调用时，它将采用处理程序的返回值作为。onbeforeunloadwindow.event.returnValue
然后，它将返回值解析为字符串（除非它是 null）。
由于被解析为字符串，因此将触发对话框，然后传递适当的 /。falsetruefalse

结果是，似乎没有办法从默认对话框中分配到阻止它。falseonbeforeunload

关于jQuery的其他说明：

在jQuery中设置事件可能会有问题，因为这也允许其他事件发生。如果你只希望你的卸载事件发生，我会坚持使用普通的JavaScript。onbeforeunload
jQuery 没有快捷方式，因此您必须使用通用语法。onbeforeunloadbind
```
$(window).bind('beforeunload', function() {} );
```

编辑 09/04/2018：自 chrome-51 以来，onbeforeunload 对话框中的自定义消息已弃用（参见：发行说明)

答案 2

使用jQuery并在IE8，Chrome和Firefox中测试的对我有用的是：

$(window).bind("beforeunload",function(event) {
    if(hasChanged) return "You have unsaved changes";
});

如果不需要提示，请不要返回任何内容，因为IE和其他浏览器行为之间存在差异，因此这一点很重要。