未触发卸载前的窗口事件答案

【问题标题】：window event beforeunload was not triggered未触发卸载前的窗口事件
【发布时间】：2019-01-03 13:42:34
【问题描述】：

我有一段代码在本地存储中存储一个布尔标志，以指示是否已经在浏览器的选项卡中打开了 Web 应用程序的实例。

我依靠beforeunload 事件来确保在用户关闭选项卡时清除本地存储标志。

须藤代码：

if (!isOneTabOpen) {
    localStorage.setItem(isOpenTabKey, 'true');

    window.addEventListener(
      'beforeunload',
      () => {
        localStorage.removeItem(isOpenTabKey);
      },
      false,
    );
  } else {
    window.alert(
      'One more page is open',
    );
    window.location.replace('about:blank');
  }

我网站的一些用户抱怨他们无法再打开该网站，并且他们看到警告说 “还有一个页面正在打开”，即使他们还没有打开该网站。

我尝试了不同的方法使 Chrome 崩溃，但我从未设法进入 localStorage 保持isOpenTabKey 设置的状态。

是否有任何已知的情况，beforeunload 事件不会触发，因此我的本地存储处于损坏状态，可能导致此问题？

【问题讨论】：

它只发生在 Chrome 上吗？
@Armel 它发生在 Chrome 中，是的，我不知道问题是否存在于其他浏览器中。

标签： javascript google-chrome web-applications

【解决方案1】：

我认为最近 onbeforeunload 规范悄然发生了变化。让我们检查一下应该工作的基本示例。

window.onbeforeunload = function(e) {
  alert('test');
  console.log('test')
  e.returnValue = 'test';
  return 'test';
};

这段简单的代码处理 onbeforeunload 事件。例如，它在最新的 chrome 中的表现如何。

它显示离开网站的浏览器默认消息，带有带有离开和取消按钮的确认框
console.log 被执行
会自动阻止阻止 javascript 执行的警报、提示和其他内容。
我也观察到，如果我们使用上述代码打开一个页面并且不会与页面关闭选项卡进行任何交互，则可能没有任何消息，当我们执行诸如单击空白点之类的操作时情况会发生变化，在这种情况下默认将出现确认框并显示控制台日志。

我认为您的问题可能是由未始终附加的事件侦听器引起的。它目前是有条件附加的，让我们在 beforeunload 函数中创建 if 语句并在里面进行适当的检查。

window.addEventListener(
  'beforeunload',
  () => {
     if (!isOneTabOpen) {
         // do loacal store stuff
     }
  },
  false,
);

它将确保您的处理程序始终处于附加状态，并且如果某些部分执行与否，您可以进行更多调试，警报被 chrome 阻止，因此它们不是进行卸载前调试的好方法。

【讨论】：