Javascript 是否可以在beforeunload弹出窗口中显示自定义消息？

使用

window.onbeforeunload

（或

$（window.on）（“beforeonload”）

）时，是否可以在弹出窗口中显示自定义消息

也许是在主流浏览器上使用的小技巧

通过查看现有答案，我感觉在过去使用

confirm

或

alert

或

event.returnValue

之类的工具可以实现这一点，但现在它们似乎不再起作用了

那么，如何在beforeunload弹出窗口中显示自定义消息？这是可能的吗？

tl；dr-在大多数现代浏览器中，您无法再设置自定义消息

一个简短的提示（因为这是一个古老的答案）-现在所有主要浏览器都不支持在

beforeunload

弹出窗口中显示自定义消息。没有新的方法可以做到这一点。如果您仍然需要支持旧浏览器，您可以在下面找到相关信息

为了在用户关闭窗口之前设置确认消息，您可以使用

jQuery

$(window).bind("beforeunload",function(event) {
    return "You have some unsaved changes";
});

Javascript

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

需要注意的是，在卸载之前，您不能将

确认/警报

放在

内

还有几点注意：

并非所有浏览器都支持此功能（更多信息请参见MDN部分） 2.在Firefox中，您必须与页面进行一些真正的交互，才能向用户显示此消息。
3.每个浏览器都可以向您的邮件中添加自己的文本

以下是使用我可以访问的浏览器的结果：

铬：

Firefox:

Safari:

即：

只是为了确保-您需要包含jquery

有关浏览器支持和删除自定义消息的更多信息：

Chrome支持51版中的自定义消息

Opera支持38版中的自定义消息

Firefox在44.0版中删除了对自定义消息的支持（仍在寻找此信息的来源）

Safari支持9.1版中的自定义消息

使用

window.onbeforeunload

（或

$（window.on）（“beforeonload”）

）时，是否可以在弹出窗口中显示自定义消息

不再是了。所有主流浏览器都开始忽略实际的消息，只显示自己的消息

通过查看现有答案，我感觉在过去使用

confirm

或

alert

或

event.returnValue

之类的工具可以实现这一点，但现在它们似乎不再起作用了

对。很久以前，您可以使用

confirm

或

alert

，最近您可以从

onbeforeuload

处理程序返回字符串，并显示该字符串。现在，字符串的内容被忽略，并被视为标志

在上使用jQuery的

时，确实必须在原始事件上使用
returnValue
：

$(window).on("beforeunload", function(e) {
    // Your message won't get displayed by modern browsers; the browser's built-in
    // one will be instead. But for older browsers, best to include an actual
    // message instead of just "x" or similar.
    return e.originalEvent.returnValue = "Your message here";
});

还是老一套的方式：

window.onbeforeunload = function() {
    return "Your message here"; // Probably won't be shown, see note above
};

这就是你所能做的。
我刚刚制作了一个div，在后台显示一条消息。
它在模态后面，但这比什么都没有好。这有点可疑，但至少你可以给你的用户一些信息，说明你为什么要麻烦她/他不要离开

constructor($elem)
{
    $(window).unbind().bind('beforeunload', (e) => this.beforeUnload(e));
}
beforeUnload(e)
{
    $('#leaveWarning').show();
    setTimeout(function(){
        $('#leaveWarning').hide();
    }, 1); // set this to 1ms .. since timers are stopped for this modal,
           // the message will disappear right after the user clicked one of the options  
    return "This message is not relevant in most modern browsers.";
}

这里有一个可用的小提琴
请在所有支持的浏览器中尝试此代码

window.onbeforeunload = function (e) {
    e = e || window.event;

    // For IE and Firefox prior to version 4
    if (e) {
        e.returnValue = 'Sure?';
    }

    // For Safari
    return 'Sure?';
};

所有这些在chrome中都不起作用，至少它需要添加return false，否则什么也不会发生

window.onbeforeunload = function(e) {
  $('#leaveWarning').show();

  // the timer is only to let the message box disappear after the user
  // decides to stay on this page
  // set this to 1ms .. since timers are stopped for this modal  
  setTimeout(function() {
    $('#leaveWarning').hide();
  }, 1);

  // 
  return false;
  return "This message is not relevant in most modern browsers.";
}

并不是所有浏览器都支持这个功能——实际上，哪一个浏览器支持这个功能？Chrome、Safari、Firefox、IEI都在Chrome上测试过，但不起作用。它不会显示您有一些未保存的更改，而是显示另一条消息。我的问题是，是否可以显示自定义消息。我不在乎它是否也显示默认内容。我只想把我们要传递的文本显示在某个地方。没错。这就是我想要指出的：Chrome和Firefox的最新版本是否有修复程序？这个答案应该更新，以便更清楚地表明大部分已经过时。Andy，你介意分享一个正在运行的演示链接吗？当然。下面是对plain/jqueryjs的修改：谢谢你，安迪。很想在不同的操作系统/浏览器中测试这一点。。但实际上重点是“onbeforeunload”默认弹出窗口出现。。。我可以禁用这个吗？。。我不想显示这个警报…好看的小提琴！不幸的是（截至2020年5月），这只适用于Firefox，而不适用于Chrome，因此我认为我们在未来可能会运气不佳。