Окно: событие popstate

Событие popstate интерфейса Window срабатывает, когда активная запись истории изменяется во время навигации пользователя по истории сеанса. Оно изменяет текущую запись истории на последнюю посещённую пользователем страницу или, если history.pushState() использовалось для добавления записи в стек истории, используется эта запись.

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

addEventListener("popstate", (event) => {});
onpopstate = (event) => {};

Объект PopStateEvent. Наследуется от Event.

PopStateEvent.state Только для чтения

Возвращает копию информации, которая была предоставлена для pushState() или replaceState().

Помимо интерфейса Window, свойство обработчика событий onpopstate также доступно для следующих элементов:

• HTMLBodyElement
• HTMLFrameSetElement
• SVGSVGElement

Если активируемая запись истории была создана с помощью вызова history.pushState() или была затронута вызовом history.replaceState(), свойство popstate события state содержит копию объекта состояния записи истории.

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

Обратите внимание, что простое вызов history.pushState() или history.replaceState() не вызовет событие popstate. Событие popstate будет активировано выполнением действия браузера, например, кликом по кнопкам «Назад» или «Вперёд» (или вызовом history.back() или history.forward() в JavaScript).

Браузеры, как правило, по-разному обрабатывают событие popstate при загрузке страницы. Chrome (до версии v34) и Safari всегда генерируют событие popstate при загрузке страницы, но Firefox — нет.

Важно сначала понять, что — для предотвращения нежелательных всплывающих окон — браузеры могут вообще не генерировать событие popstate , если страница не взаимодействовала с пользователем.

Этот раздел описывает шаги, которые следуют браузеры в тех случаях, когда они могут генерировать событие popstate (то есть в тех случаях, когда страница взаимодействовала с пользователем).

Когда происходит навигация — будь то по нажатию пользователем кнопки «Назад» в браузере или иным образом — событие popstate генерируется почти в конце процесса навигации к новому расположению. Оно происходит после загрузки (при необходимости), отображения, видимости и т. д. нового расположения — после отправки события pageshow, но до восстановления сохранённых данных состояния пользователя и отправки события hashchange.

Для лучшего понимания, когда генерируется событие popstate , рассмотрим упрощённую последовательность событий, которая происходит при изменении текущей записи истории, будь то из-за навигации пользователя по сайту или программатического перебора истории. Здесь переход изменяет текущую запись истории на запись, которую мы будем называть new-entry. Текущая запись стека сеанса истории текущей страницы будет называться current-entry.

1. Если new-entry не содержит существующего Document, извлеките содержимое и создайте его Document перед продолжением. В конечном итоге это вызовет события, такие как DOMContentLoaded и load для Window, содержащего документ, но шаги ниже будут продолжены в то же время.
2. Если заголовок current-entry не был установлен с помощью методов API истории (pushState() или replaceState()), установите заголовок записи в строку, возвращаемую атрибутом document.title.
3. Если браузер имеет информацию о состоянии, которую он хочет сохранить в current-entry перед переходом от неё, он это делает. Теперь говорят, что запись имеет «сохранённое состояние пользователя». Эта информация, которую браузер может добавить в запись сеанса истории, может включать, например, положение прокрутки документа, значения входных данных форм и другие подобные данные.
4. Если у new-entry другой объект Document , чем у current-entry, контекст просмотра обновляется таким образом, что его свойство document ссылается на документ, на который ссылается new-entry, а имя контекста обновляется для соответствия имени контекста текущего документа.
5. Каждый элемент управления формой в Document new-entry, у которого настроен autocomplete с именем поля автозаполнения, установленным в off, сбрасывается. Подробнее о именах полей автозаполнения и о том, как работает автозаполнение, см. в атрибуте HTML autocomplete.
6. Если документ new-entry уже полностью загружен и готов — то есть его readyState равен complete — и документ ещё не виден, он становится видимым, и событие pageshow генерируется для документа с атрибутом PageTransitionEvent's persisted, установленным в значение true.
7. Адрес документа URL устанавливается в адрес new-entry.
8. Если выполнение перехода истории выполняется с разрешенной заменой, запись, непосредственно предшествующая целевой записи (учитывая параметр delta в методах, таких как go()), удаляется из стека истории.
9. Если у new-entry нет сохранённого состояния пользователя, а фрагмент её URL не null, документ прокручивается до этого фрагмента.
10. Далее, current-entry устанавливается в new-entry. Целевая запись теперь считается текущей.
11. Если у new-entry есть сохранённая сериализованная информация о состоянии, она десериализуется в History.state; в противном случае, state устанавливается в null.
12. Если значение state изменилось, событие popstate отправляется в документ.
13. Любые сохранённые данные состояния пользователя восстанавливаются, если браузер решает это сделать.
14. Если исходная и новая записи имели один и тот же документ, но имели разные фрагменты в их URL, событие hashchange отправляется в окно.

Как видно, событие popstate — практически последнее действие в процессе навигации по страницам таким образом.

Страница по адресу http://example.com/example.html, на которой запущен следующий код, сгенерирует журналы, как указано:

window.addEventListener("popstate", (event) => {
  console.log(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
});
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

Тот же пример с использованием свойства обработчика событий onpopstate:

window.onpopstate = (event) => {
  console.log(
    `location: ${document.location}, state: ${JSON.stringify(event.state)}`,
  );
};
history.pushState({ page: 1 }, "title 1", "?page=1");
history.pushState({ page: 2 }, "title 2", "?page=2");
history.replaceState({ page: 3 }, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null"
history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3}"

Обратите внимание, что даже если исходная запись истории (для http://example.com/example.html) не имеет связанного с ней объекта состояния, событие popstate всё равно генерируется при активации этой записи после второго вызова history.back().

• Управление историей браузера (API истории)
• Окно: событие hashchange