是否可以在 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";
};

      请务必注意，您不能放入 confirm/alert 放入 beforeunload

还有一些注意事项：

并非所有浏览器都支持这一点（更多信息在 MDN 上的浏览器兼容性部分） 2. 在 Firefox 中，您必须与页面进行一些真正的交互才能让用户看到此消息。 3. 每个浏览器都可以将自己的文本添加到您的消息中。

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

铬合金：

https://i.stack.imgur.com/x5blG.png

火狐：

https://i.stack.imgur.com/rpxhz.png

苹果浏览器：

https://i.stack.imgur.com/NLpOw.png

IE：

https://i.stack.imgur.com/zC5Ys.png

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

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

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

---

使用 window.onbeforeunload（或 $(window).on("beforeonload")）时，是否可以在该弹出窗口中显示自定义消息？

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

通过查看现有答案，我觉得过去使用确认或警报或 event.returnValue 之类的东西是可能的，但现在看来它们不再起作用了。

正确的。 很久 以前，您可以使用 confirm 或 alert，最近您可以从 onbeforeunload 处理程序返回一个字符串，然后显示该字符串。现在，字符串的内容被忽略，它被视为一个标志。

使用 jQuery 的 on 时，您确实必须在原始事件上使用 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.";
}

这是一个有效的小提琴https://jsfiddle.net/sy3fda05/2/

---

从 2021 年起，出于安全原因，至少在主要浏览器（Chrome、Firefox、Safari、Edge、Opera）中，不再可能在 beforeunload 弹出窗口中显示自定义消息。

这不再可能，因为：

铬：版本 51

火狐：版本 44

Safari：版本 9

边缘：这是不可能的

歌剧：版本 38

详情见：

https://www.chromestatus.com/feature/5349061406228480

https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support

获得类似结果的另一种方法是捕获与链接相关的点击事件（这会使您离开当前页面）并在那里请求确认。它可能会被调整为包括表单提交或通过脚本重定向（这需要在触发重定向的元素中应用特定的类和信息）。

这是一个工作代码片段（基于 jQuery），它向您展示了如何做到这一点：

编辑：出于安全原因，此处的代码片段不适用于所有浏览器（该片段生成一个 iframe ......并且在某些浏览器中“在不同的源域 iframe 中不允许使用 window.confirm”），但是代码确实有效，所以试一试！

$('body').on('click', function(e) { var target, href; //识别目标对象 target = $(e.target); //如果目标对象是链接或者包含在我们显示确认消息的链接 if (e.target.tagName === 'A' || target.parents('a').length > 0) { //默认行为被阻止（链接不起作用） e.preventDefault(); if (window.confirm("你真的确定要继续吗？")) { //识别链接目标 if (e.target.tagName === 'A') { href = target .attr('href'); } else { href = target.parents('a').first().attr('href'); } //重定向window.location.href = href; } } }); 点我，我带你回家

---

您不能在现代浏览器上设置自定义消息，而是可以使用默认警报功能。

checkout browser compatibility

---

为所有支持的浏览器尝试此代码

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.";
}

---