为什么浏览器确认框（由 beforeunload 事件处理程序触发）仅在我单击页面时出现？答案

【问题标题】：Why the browsers confirm box (triggered by beforeunload event handler) only appears when I click onto the page?为什么浏览器确认框（由 beforeunload 事件处理程序触发）仅在我单击页面时出现？
【发布时间】：2019-02-19 17:27:07
【问题描述】：

我想在用户离开页面之前显示一个确认框并警告用户，尤其是在 HTTP 请求期间。为此，我在我的 react 组件中为 window 对象添加了一个事件监听器。

  componentWillMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload(e) {
    e.returnValue = 'You sure you want to leave?';
  }

这个 sn-p 有效，让我们的生活更轻松，但有一件事激起了我的好奇心。

我看到确认框，只有当我在加载后点击页面。它不显示浏览器原生的确认框，虽然它触发了handleBeforeUnload方法。

有人可以解释一下，为什么 window.onbeforeunload 只有在我关注页面时才有效？

【问题讨论】：

标签： javascript web frontend

【解决方案1】：

这是一个有意的限制。来自 MDN：

注意：为了防止不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非页面已经被交互过，或者甚至可能根本不显示它们。

见：https://developer.mozilla.org/en-US/docs/Web/Events/beforeunload

【讨论】：