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

小编典典

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

all

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

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

阅读 98

2022-03-28

共1个答案

小编典典

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

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

以下是微软对此的参考：

将字符串分配给 window.event 的 returnValue
属性时，会出现一个对话框，让用户可以选择留在当前页面并保留分配给它的字符串。对话框中显示的默认语句“您确定要离开此页面吗？…按 OK 继续，或按
Cancel 留在当前页面。”无法删除或更改。

问题似乎是：

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

结果是，似乎没有一种分配false方式onbeforeunload来阻止它进入默认对话。

关于 jQuery 的附加说明：

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

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

2022-03-28