Question

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

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

Sudo代码：

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

在我网站的用户中，有一个抱怨说他们无法再打开该网站，并且他们看到警告，说“他们又打开了一个页面”。 / p>

我尝试了多种方法使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阻止，因此它们不是进行卸载前调试的好方法。

未触发卸载前的窗口事件

1 个答案: