Window: popstate event

在此页

The history stack
When popstate is sent
范例
规范
浏览器兼容性
另请参阅
相关话题

popstate event of the Window interface is fired when the active history entry changes while the user navigates the session history. It changes the current history entry to that of the last page the user visited or, if history.pushState() has been used to add a history entry to the history stack, that history entry is used instead.

冒泡	Yes
可取消	No
接口	`PopStateEvent`
事件处理程序特性	`onpopstate`

The history stack

If the history entry being activated was created by a call to history.pushState() or was affected by a call to history.replaceState() ， popstate event's state property contains a copy of the history entry's state object.

These methods and their corresponding events can be used to add data to the history stack which can be used to reconstruct a dynamically generated page, or to otherwise alter the state of the content being presented while remaining on the same Document .

Note that just calling history.pushState() or history.replaceState() won't trigger a popstate event. The popstate event will be triggered by doing a browser action such as a click on the back or forward button (or calling history.back() or history.forward() in JavaScript).

Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari always emit a popstate event on page load, but Firefox doesn't.

注意 : When writing functions that process popstate event it is important to take into account that properties like window.location will already reflect the state change (if it affected the current URL), but document might still not. If the goal is to catch the moment when the new document state is already fully in place, a zero-delay setTimeout() method call should be used to effectively put its inner callback function that does the processing at the end of the browser event loop: 窗口。 onpopstate = () => setTimeout(doSomeThing, 0);

When popstate is sent

When the transition occurs, either due to the user triggering the browser's "Back" button or otherwise, the popstate event is near the end of the process to transition to the new location. It happens after the new location has loaded (if needed), displayed, made visible, and so on, after the pageshow event is sent, but before the persisted user state information is restored and the hashchange event is sent.

To better understand when the popstate event is fired, consider this simplified sequence of events that occurs when the current history entry changes due to either the user navigating the site or the history being traversed programmatically. Here, the transition is changing the current history entry to one we'll refer to as new-entry . The current page's session history stack entry will be referred to as current-entry .

若 new-entry doesn't currently contain an existing Document , fetch the content and create its Document before continuing. This will eventually send events such as DOMContentLoaded and load 到 Window containing the document, but the steps below will continue to execute in the meantime.
若 current-entry 's title wasn't set using one of the History API methods ( pushState() or replaceState() , set the entry's title to the string returned by its document.title 属性。
If the browser has state information it wishes to store with the current-entry before navigating away from it, it then does so. The entry is now said to have "persisted user state." This information the browser might add to the history session entry may include, for instance, the document's scroll position, the values of form inputs, and other such data.
若 new-entry has a different Document object than current-entry , the browsing context is updated so that its document property refers to the document referred to by new-entry , and the context's name is updated to match the context name of the now-current document.
Each form control within new-entry 's Document that has autocomplete configured with its autofill field name set to off is reset. See The HTML autocomplete attribute for more about the autocomplete field names and how autocomplete works.
若 new-entry 's document is already fully loaded and ready—that is, its readyState is complete —and the document is not already visible, it's made visible and the pageshow event is fired at the document with the PageTransitionEvent 's persisted 属性设置为 true .
The document's URL is set to that of new-entry .
If the history traversal is being performed with replacement enabled, the entry immediately prior to the destination entry (taking into account the delta parameter on methods such as go() ) is removed from the history stack.
若 new-entry doesn't have persisted user state and its URL's fragment is non- null , the document is scrolled to that fragment.
Next, current-entry 被设为 new-entry . The destination entry is now considered to be current.
若 new-entry has serialized state information saved with it, that information is deserialized into History.state ；否则， state is null .
若值 state changed, the popstate event is sent to the document.
Any persisted user state is restored, if the browser chooses to do so.
If the original and new entry's shared the same document, but had different fragments in their URLs, send the hashchange event to the window.

As you can see, the popstate event is nearly the last thing done in the process of navigating pages in this way.

范例

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

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}"

The same example using the onpopstate 事件处理程序特性：

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() .

规范

规范	状态
HTML 实时标准 The definition of 'popstate' in that specification.	实时标准

浏览器兼容性

更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`popstate` event	Chrome 5 5 Before version 34, Chrome would fire a `popstate` event on page load.	Edge 12	Firefox 4 4 Firefox emits a `popstate` event on page load.	IE 10	Opera 11.5	Safari 6 6 Before version 10, Safari would fire a `popstate` event on page load.	WebView Android ≤37 ≤37 Before version 37, WebView would fire a `popstate` event on page load.	Chrome Android 18 18 Before version 34, Chrome would fire a `popstate` event on page load.	Firefox Android 4 4 Firefox emits a `popstate` event on page load.	Opera Android 11.5	Safari iOS 5.1 5.1 Before version 10, Safari would fire a `popstate` event on page load.	Samsung Internet Android 1.0 1.0 Before version 2.0, Samsung Internet would fire a `popstate` event on page load.

在此页

The history stack

When popstate is sent

范例

规范

浏览器兼容性

图例

另请参阅

元数据

相关话题