Question

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

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

通过查看现有答案，我觉得过去使用confirm或alert或event.returnValue这样的事情是可能的，但现在它们似乎已不再适用了。< / p>

那么，如何在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

还有一些说明：


不所有浏览器都支持此功能（有关MDN的Browser compatibility部分的详细信息）

在Firefox中，您必须与页面进行一些真实的交互，以便向用户显示此消息。

每个浏览器都可以在邮件中添加自己的文字。

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

<强>铬：

<强>火狐：

<强> Safari浏览器：

<强> IE：

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

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

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

Answer 2

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

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

通过查看现有答案，我觉得过去使用confirm或alert或event.returnValue这样的事情是可能的，但现在它们似乎已不再适用了。< / p>

正确。长时间之前，您可以使用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

我刚刚制作了一个显示在后台显示消息的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/

Answer 4

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

Answer 5

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

>

这不再可能，因为：

Chrome：版本 51
Firefox：版本 44
Safari：版本 9
Edge：这是不可能的
Opera：版本 38

详情见：

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

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

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

在所有受支持的浏览器中尝试使用此代码

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

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

6 个答案: