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

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

window.onbeforeunload=handler

这是可行的,但它会引发一个默认对话框,其中包含一条恼人的标准消息,包装了我自己的文本。我需要完全替换标准消息,使文本清晰,或者(甚至更好)使用jQuery将整个对话框替换为模式对话框

到目前为止,我失败了,我还没有找到任何其他人似乎有答案。有可能吗

我的页面中的Javascript:

<脚本类型="text/javascript“&燃气轮机;
window.onbeforeunload=关闭它;
&lt/脚本>

closeIt()函数:

函数closeIt()
{
如果(更改==“true”文件==“true”)
{
return“在这里您可以将自定义消息附加到默认对话框中。”;;
}
}

使用jQuery和jqModal,我尝试过这种方法(使用自定义确认对话框):

$(窗口).beforeunload(函数(){
确认('newmessage:'+this.href+'!',this.href');
返回false;
});

这也不起作用-我似乎无法在卸载之前绑定到事件

您无法修改onbeforeunload的默认对话框,因此最好使用它

window.onbeforeunload=函数(){
返回“您有未保存的更改!”;
}

以下是Microsoft对此的参考:

将字符串分配给window.event的returnValue属性时,会出现一个对话框,使用户可以选择保留当前页面并保留分配给它的字符串。无法删除或更改对话框中出现的默认语句:“是否确实要导航到此页面?…按“确定”继续,或按“取消”停留在当前页面。”

问题似乎是:

  1. 调用onbeforeunload时,它将处理程序的返回值作为window.event.returnValue
  2. 然后,它将返回值解析为字符串(除非为null)
  3. 由于false被解析为字符串,对话框将启动,然后将传递相应的true/false

结果是,似乎没有办法将false指定给onbeforeuload,以防止它出现在默认对话框中

关于jQuery的补充说明:

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

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

编辑2018年4月9日:自chrome-51以来,onbeforeunload对话框中的自定义消息已被弃用(参见:发行说明)

发表评论