当使用window.onbeforeunload（或$(window).on("beforeonload")）时，是否可以在该弹出窗口中显示自定义消息？
也许是一个适用于主流浏览器的小技巧？
通过查看现有答案，我觉得过去使用 confirm 或 alert 或 event.returnValue 之类的东西是可能的，但现在它们似乎不再工作了。
那么，如何在 beforeunload 弹出窗口中显示自定义消息？这甚至/仍然可能吗？
【问题讨论】：
标签： javascript jquery google-chrome firefox safari
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 inside beforeunload
还有一些注意事项：
- 不所有浏览器都支持这个（更多信息在 MDN 上的Browser compatibility 部分） 2. 在 Firefox 中，您必须与页面进行一些真正的交互才能让用户看到此消息。
3. 每个浏览器都可以在您的消息中添加自己的文本。
以下是使用我可以访问的浏览器的结果：
铬：
火狐：
Safari：
IE：
只是为了确保 - 您需要包含 jquery
有关浏览器支持和自定义消息删除的更多信息：
【讨论】：
当使用
window.onbeforeunload（或$(window).on("beforeonload")）时，是否可以在该弹出窗口中显示自定义消息？
现在没有了。所有主流浏览器都开始忽略实际消息，只显示自己的消息。
通过查看现有答案，我觉得过去使用
confirm或alert或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 弹出窗口中显示自定义消息。
这是不可能的，因为：
详情见：
获得类似结果的另一种方法是捕获与链接相关的点击事件（这会使您离开当前页面）并在此处请求确认。它可能会被调整为包括表单提交或通过脚本进行重定向（这将需要在触发重定向的元素中应用特定的类和信息）。
这是一个工作代码 sn-p（基于 jQuery），向您展示了如何做到这一点：
编辑：这里的代码 sn-p 并不适用于所有浏览器，出于安全原因（sn-p 生成一个 iframe...并且在某些浏览器中“使用 window.确认在不同的源域 iframe 中是不允许的”），但代码确实有效，所以试试看！
$('body').on('click', function(e) {
var target, href;
//Identifying target object
target = $(e.target);
//If the target object is a link or is contained in a link we show the confirmation message
if (e.target.tagName === 'A' || target.parents('a').length > 0) {
//Default behavior is prevented (the link doesn't work)
e.preventDefault();
if (window.confirm("Are you really really sure you want to continue?")) {
//Identify link target
if (e.target.tagName === 'A') {
href = target.attr('href');
} else {
href = target.parents('a').first().attr('href');
}
//Redirect
window.location.href = href;
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="https://stackoverflow.com">Click me and I'll take you home</a>【讨论】：
您不能在现代浏览器上设置自定义消息，而是可以使用默认警报功能。
【讨论】：
在所有支持的浏览器上试试这个代码
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.";
}
【讨论】：