我们的志愿者还没有将这篇文章翻译为 中文 (简体)。加入我们帮助完成翻译!
An event handler for the popstate
event on the window.
A popstate
event is dispatched to the window every time the active history entry changes between two history entries for the same document. If the history entry being activated was created by a call to history.pushState()
or was affected by a call to history.replaceState()
, the popstate
event's state
property contains a copy of the history entry's state object.
Note that just calling history.pushState()
or history.replaceState()
won't trigger a popstate
event. The popstate
event is only triggered by doing a browser action such as a clicking on the back button (or calling history.back()
in JavaScript). And the event is only triggered when the user navigates between two history entries for the same document.
Browsers tend to handle the popstate
event differently on page load. Chrome and Safari always emit a popstate
event on page load, but Firefox doesn't.
Syntax
window.onpopstate = funcRef;
- funcRef is a handler function.
The popstate event
As an example, a page at https://example.com/example.html
running the following code will generate alerts as indicated:
window.onpopstate = function(event) { alert("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(); // alerts "location: https://example.com/example.html?page=1, state: {"page":1}" history.back(); // alerts "location: https://example.com/example.html, state: null history.go(2); // alerts "location: https://example.com/example.html?page=3, state: {"page":3}
Note that even though the original history entry (for https://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()
.