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

Question

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

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事件。

Answer 1

您不能修改OnBeforeUnload的默认对话，因此最好使用它。

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

下面是Microsoft对此的参考：

将字符串分配给Window.Event的returnValue属性时，将出现一个对话框，使用户可以选择留在当前页上并保留分配给它的字符串。无法删除或更改对话框中出现的默认语句“是否确定要离开此页？...按”确定“继续，或按”取消“留在当前页。

问题似乎是：

1. 调用OnBeforeUnload时，它将处理程序的返回值取为Window.Event.ReturnValue。
2. 然后将返回值解析为字符串（除非它为空）。
3. 由于false被解析为字符串，对话框将触发，然后传递适当的true/false。

结果是，似乎没有一种方法可以将false分配给onbeforeunload以防止它出现在默认对话中。

关于jQuery的其他注意事项：

>

在jQuery中设置事件可能会有问题，因为这样也会发生其他OnBeforeUnload事件。如果您只希望卸载事件发生，我会坚持使用简单的OL'JavaScript。

jQuery没有OnBeforeUnload的快捷方式，因此必须使用通用的Bind语法。

$(window).bind('beforeunload', function() {} );

编辑09/04/2018：自chrome-51以来，不推荐使用onbeforeunload对话框中的自html" target="_blank">定义消息（参见：版本说明）