未触发卸载前的窗口事件

Question

我有一段代码在本地存储区中存储一个布尔标志，以指示是否已经在浏览器的选项卡中打开了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事件，因此我的本地存储处于损坏状态，从而可能导致此问题？

Answer 1

我认为onbeforeunload规范在最近一段时间无声无息地发生了变化。 让我们检查一下应该起作用的基本示例。

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

这个简单的代码处理onbeforeunload事件。 例如，它在最新的Chrome中的行为。

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

我认为您的问题可能是由于事件监听器未始终附加引起的。 当前它是有条件的，让makeif语句位于beforeunload函数内部，并在内部进行适当的检查。

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

这将确保您的处理程序始终处于连接状态，并且无论是否执行某些部件，您都可以进行更多调试，chrome阻止了警报，因此它们不是进行卸载前调试的好方法。