popstate

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

Обратите внимание,  history.pushState() или history.replaceState() не вызывают событие popstate. Событие popstate будет вызвано при совершении действий в браузере, таких как нажатие кнопок "Вперед" или "Назад" (или при вызове history.back() или history.forward() из JavaScript).

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

General info

Specification
HTML5
Interface
PopStateEvent
Bubbles
Yes
Cancelable
No
Target
defaultView
Default Action
None

Properties

Property Type Description
target Только для чтения EventTarget The browsing context (window).
type Только для чтения DOMString The type of event.
bubbles Только для чтения Boolean Whether the event normally bubbles or not.
cancelable Только для чтения Boolean Whether the event is cancellable or not.
state Только для чтения any The current history entry's state object (if any).

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Да) (Да) 4.0 (2) 10.0 [3] (Да) (Да)[1]
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 3.0[2] (Да) 4.0 (2) 10.0 (Да) (Да)[1]

[1] The implementation has limited support.

[2] The implementation in Android 2.2 and 2.3 was buggy.

[3] IE & Edge do not fire the popstate event when the URL's hash value changes, see the bug report.

Example

A page at http://example.com/example.html running the following code will generate logs as indicated:

window.onpopstate = function(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}

Note that even though the original history entry (for http://example.com/example.html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().

See Also