时间戳

首页 > 解决方案 > 未触发卸载前的窗口事件

javascript - 未触发卸载前的窗口事件

问题描述

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

标签： javascriptgoogle-chromeweb-applications

解决方案

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

推荐阅读