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

Is it possible to display a custom message in the beforeunload popup?

提问by Ionic? Biz?u

When using window.onbeforeunload(or $(window).on("beforeonload")), is it possible to display a custom message in that popup?

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

Maybe a small trick that works on major browsers?

也许是一个适用于主要浏览器的小技巧？

By looking at existing answers I have the feeling this was possible in the past using things like confirmor alertor event.returnValue, but now it seems they are not working anymore.

通过查看现有的答案，我感觉过去使用confirmoralert或 or 之类的东西是可能的event.returnValue，但现在似乎它们不再起作用了。

So, how to display a custom message in the beforeunload popup? Is that even/still possible?

那么，如何在 beforeunload 弹出窗口中显示自定义消息？这甚至/仍然可能吗？

回答by Dekel

A quick note (since this is an old answer) - these days all major browsers don't support custom message in the beforeunloadpopup. There is no new way to do this. In case you still do need to support old browsers - you can find the information below.

快速说明（因为这是一个旧答案） - 现在所有主要浏览器都不支持beforeunload弹出窗口中的自定义消息。没有新的方法可以做到这一点。如果您仍然需要支持旧浏览器 - 您可以在下面找到信息。

In order to set a confirmation message before the user is closing the window you can use

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

jQuery

jQuery

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

Javascript

Javascript

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

      It's important to notice that you can'tputconfirm/alertinsidebeforeunload

      它注意到你很重要不能把confirm/alert里面beforeunload

A few more notes:

1. NOTall browsers support this (more info in the Browser compatibilitysection on MDN)
2. In Firefox you MUST do some real interaction with the page in order for this message to appear to the user.
3. Each browser can add his own text to your message.

还有一些注意事项：

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

Here are the results using the browsers I have access to:

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

Chrome:

铬合金：

Firefox:

火狐：

Safari:

苹果浏览器：

IE:

IE：

Just to make sure - you need to have jquery included

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

More information regarding the browsers support and the removal of the custom message:

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

1. Chrome removedsupport for custom message in ver 51
2. Opera removedsupport for custom message in ver 38
3. Firefox removed support for custom message in ver 44.0 (still looking for source for this information)
4. Safari removedsupport for custom message in ver 9.1

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

回答by T.J. Crowder

When using window.onbeforeunload(or $(window).on("beforeonload")), is it possible to display a custom message in that popup?

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

Not anymore. All major browsers have started ignoring the actual message and just showing their own.

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

By looking at existing answers I have the feeling this was possible in the past using things like confirmor alertor event.returnValue, but now it seems they are not working anymore.

通过查看现有的答案，我感觉过去使用confirmoralert或 or 之类的东西是可能的event.returnValue，但现在似乎它们不再起作用了。

Correct. A longtime ago, you could use confirmor alert, more recently you could return a string from an onbeforeunloadhandler and that string would be displayed. Now, the content of the string is ignored and it's treated as a flag.

正确的。一个很长的时间以前，你可以使用confirm或alert更近，你可以从一个返回一个字符串onbeforeunload处理函数和字符串将被显示。现在，字符串的内容被忽略，它被视为一个标志。

When using jQuery's on, you do indeed have to use returnValueon the original event:

使用 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";
});

or the old-fasioned way:

或老式的方式：

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

That's all you can do.

这就是你所能做的。

回答by Andy Killat

I just made a div appear that shows a message in the background. It is behind the modal but this is better then nothing. It is kind of shady but at least you can give your user some info on why you bother her/him not to leave.

我刚刚做了一个 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.";
}

Here is a working Fiddle https://jsfiddle.net/sy3fda05/2/

这是一个工作小提琴https://jsfiddle.net/sy3fda05/2/

回答by Juliano

All the above doesn't work in chrome at least it need to add return false otherwise nothing happen.

以上所有内容在 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.";
}

回答by krunal shimpi

Try this code for all all browsers supported

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

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?';
};