событие окна перед загрузкой не было запущено

Question

У меня есть фрагмент кода, который хранит логический флаг в локальном хранилище, чтобы указать, есть ли уже экземпляр веб-приложения, открытый на вкладке браузера.

Я полагаюсь на событие 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';
};

Этот простой фрагмент кода обрабатывает событие перед загрузкой. Как он ведет себя в новейшем хроме например.

• показывает сообщение браузера по умолчанию для выхода с сайта с окном подтверждения с кнопками выхода и отмены
• console.log выполнен
• оповещения, подсказки и другие вещи, которые блокируют выполнение JavaScript, автоматически блокируются.
• также я заметил, что если мы откроем страницу с указанным выше кодом и не будем взаимодействовать с закрывающей вкладкой, будет возможно без каких-либо сообщений, ситуация изменится, когда мы сделаем что-то вроде щелчка в пустом месте, в этом случае по умолчанию появится окно подтверждения и журнал консоли.

Я думаю, что ваша проблема может быть вызвана тем, что прослушиватель событий не всегда подключен. В настоящее время он подключен условно, позволяет сделать оператор if внутри функции beforeunload и выполнить соответствующую проверку внутри.

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

Это будет гарантировать, что ваш обработчик всегда подключен, и вы можете выполнять больше отладки, если некоторые части выполняются или нет, оповещения блокируются Chrome, поэтому они не являются хорошим способом сделать перед отладкой загрузки.