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

Question

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

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

通过查看现有的答案,我觉得过去可能会使用confirm或者alert或类似的东西event.returnValue,但现在看来它们已经不再适用了.

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

Answer 1

要在用户关闭窗口之前设置确认消息,您可以使用

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

还有一些说明:

1. 并非所有浏览器都支持此功能(MDN上的浏览器兼容性部分中的更多信息)
2. 在Firefox中,您必须与页面进行一些真实的交互,以便向用户显示此消息.
3. 每个浏览器都可以在邮件中添加自己的文本.

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

铬:

火狐:

苹果浏览器:

IE:

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

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

1. Chrome 在第51版中删除了对自定义消息的支持
2. Opera 删除了对版本38中自定义消息的支持
3. Firefox在版本44.0中删除了对自定义消息的支持(仍在查找此信息的来源)
4. Safari 删除了对9.1版中自定义消息的支持

Answer 2

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

这就是你所能做的一切.

Answer 3

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

这不再可能，因为：

• Chrome：版本 51
• 火狐浏览器：版本 44
• Safari：版本 9
• 边缘：这从来都是不可能的
• 歌剧：版本 38

详情请参阅：

• https://www.chromestatus.com/feature/5349061406228480
• https://caniuse.com/mdn-api_windoweventhandlers_onbeforeunload_custom_text_support

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

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

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

$('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>

Answer 4

我刚刚做了一个 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/