Window: событие pageshow

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Событие pageshow отправляется Window, когда браузер отображает страницу.

Оно срабатывает в следующих случаях:

  • Первоначальная загрузка страницы
  • Переход на страницу с другой страницы в том же самом окне или вкладке
  • Восстановление состояния ранее открытой страницы на мобильных ОС
  • Возврат на страницу по кнопкам браузера "Вперёд" и "Назад"

Примечание: Во время первоначальной загрузки страницы, событие pageshow срабатывает после события load.

Всплывает Нет
Отменяемое Нет
Интерфейс PageTransitionEvent
Свойство обработчика события onpageshow

Примеры

Следующий пример создаёт обработчики для событий, перечисленных в массиве events. Обработчик eventLogger() выводит на консоль каждый тип произошедшего события вместе со значением флага persisted в событиях pageshow и pagehide.

JavaScript

js
const events = ["pagehide", "pageshow", "unload", "load"];

const eventLogger = (event) => {
  switch (event.type) {
    case "pagehide":
    case "pageshow":
      let isPersisted = event.persisted ? "persisted" : "not persisted";
      console.log("Event:", event.type, "-", isPersisted);
      break;
    default:
      console.log("Event:", event.type);
      break;
  }
};

events.forEach((eventName) => window.addEventListener(eventName, eventLogger));

HTML

html
<p>
  Откройте консоль и следите за выводом данных при переходе на эту страницу и
  обратно. этой страницы. Попробуйте открыть новые страницы в текущей вкладке, а
  затем вернитесь обратно, и посмотрите, что отобразилось в консоли.
</p>

Результат

Спецификации

Specification
HTML
# event-pageshow

Совместимость с браузерами

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pageshow event

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также