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
- 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). |
Совместимость с браузерами
BCD tables only load in the browser
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()
.