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

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


当前回答

试试这个

$(window).bind('beforeunload', function (event) {
            setTimeout(function () {
                var retVal = confirm("Do you want to continue ?");
                if (retVal == true) {
                    alert("User wants to continue!");
                    return true;
                }
                else {
                    window.stop();
                    return false;
                }
            });
            return;
        });

其他回答

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

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

以下是微软对此的参考:

当一个字符串被赋值给window的returnValue属性时。事件时,将出现一个对话框,让用户选择是否停留在当前页面并保留分配给它的字符串。对话框中出现的默认语句,“您确定要导航离开此页吗?”... 按“确定”继续,或按“取消”保持在当前页面。”,不能删除或更改。

问题似乎是:

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

结果是,似乎没有办法将false赋值给onbeforeunload以防止它出现默认对话框。

jQuery的附加说明:

在jQuery中设置事件可能会有问题,因为这会允许其他onbeforeunload事件发生。如果你只希望你的卸载事件发生,我坚持用普通的JavaScript。 jQuery没有onbeforeunload的快捷方式,因此必须使用通用绑定语法。 美元(窗口)。Bind ('beforeunload', function() {});

编辑09/04/2018:自chrome-51以来,onbeforeunload对话框中的自定义消息已弃用(cf:发布说明)

使用专用版本的“绑定”命令“一”。事件处理程序第一次执行后,将自动将其作为事件处理程序删除。

$(window).one("beforeunload", BeforeUnload);

试试这个

$(window).bind('beforeunload', function (event) {
            setTimeout(function () {
                var retVal = confirm("Do you want to continue ?");
                if (retVal == true) {
                    alert("User wants to continue!");
                    return true;
                }
                else {
                    window.stop();
                    return false;
                }
            });
            return;
        });

Angular 9的方法:

constructor() {
    window.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
     if (this.generatedBarcodeIndex) {
      event.preventDefault(); // for Firefox
      event.returnValue = ''; // for Chrome
      return '';
     }
     return false;
    });
   }

浏览器支持并删除自定义消息:

Chrome在51分钟内删除了对自定义消息的支持 Opera在38分钟内删除了对自定义消息的支持 Firefox在44.0分钟内删除了对自定义消息的支持 Safari在9.1分钟内删除了对自定义消息的支持

这不能在chrome现在做,以避免垃圾邮件,参考javascript onbeforeunload不显示自定义消息了解更多细节。