Документ: событие visibilitychange

Событие visibilitychange срабатывает в документе, когда содержимое его вкладки становится видимым или скрытым.

Событие не может быть отменено.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

addEventListener("visibilitychange", (event) => {});

onvisibilitychange = (event) => {};

Общее Event.

Событие не содержит обновленного статуса видимости документа, но вы можете получить эту информацию из свойства документа visibilityState.

Это событие срабатывает со значением visibilityState hidden при переходе пользователя на новую страницу, переключении вкладок, закрытии вкладки, минимизации или закрытии браузера или, на мобильных устройствах, переключении с браузера на другое приложение. Переход в hidden — это последнее событие, которое надёжно наблюдается страницей, поэтому разработчики должны рассматривать его как вероятный конец сессии пользователя (например, для отправки аналитических данных).

Переход в hidden также является хорошей точкой, в которой страницы могут прекратить обновление интерфейса и приостановить любые задачи, которые пользователь не хочет выполнять в фоновом режиме.

В этом примере воспроизведение аудио приостанавливается, когда страница скрыта, и возобновляется, когда страница становится видимой снова. Для получения полного примера см. документацию Page Visibility API: приостановка аудио при скрытии страницы.

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    playingOnHide = !audio.paused;
    audio.pause();
  } else {
    // Resume playing if audio was "playing on hide"
    if (playingOnHide) {
      audio.play();
    }
  }
});

В этом примере переход в hidden рассматривается как окончание сессии пользователя, и соответствующие аналитические данные отправляются с помощью API Navigator.sendBeacon():

document.onvisibilitychange = () => {
  if (document.visibilityState === "hidden") {
    navigator.sendBeacon("/log", analyticsData);
  }
};

• Page Visibility API
• Document.visibilityState
• Document.hidden
• Не теряйте состояние пользователя и приложения, используйте Page Visibility подробно объясняет, почему следует использовать visibilitychange, а не beforeunload/unload.
• Page Lifecycle API предоставляет рекомендации по обработке поведения жизненного цикла страницы в ваших веб-приложениях.