JavaScript如何覆盖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!';
}

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

问题似乎是：

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

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

jQuery的其他说明：

• 在jQuery中设置事件 可能会 出现问题，因为这onbeforeunload也会导致其他事件发生。如果您只希望发生卸载事件，那么我会坚持使用普通的JavaScript。
• jQuery没有捷径，onbeforeunload因此您必须使用通用bind语法。

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

：自chrome-51起，onbeforeunload对话框中的自定义消息已弃用（cf：发行说明]）