历史 API

The DOM Window object provides access to the browser's session history (not to be confused for WebExtensions history ) through the history object. It exposes useful methods and properties that let you navigate back and forth through the user's history, and manipulate the contents of the history stack.

概念和用法

Moving backward and forward through the user's history is done using the back() , forward() ,和 go() 方法。

Moving forward and backward

To move backward through history:

window.history.back()
					

This acts exactly as if the user clicked on the Back button in their browser toolbar.

Similarly, you can move forward (as if the user clicked the Forward button), like this:

window.history.forward()
					

Moving to a specific point in history

可以使用 go() method to load a specific page from session history, identified by its relative position to the current page. (The current page's relative position is 0 .)

To move back one page (the equivalent of calling back() ):

window.history.go(-1)
					

To move forward a page, just like calling forward() :

window.history.go(1)
					

Similarly, you can move forward 2 pages by passing 2 , and so forth.

Another use for the go() method is to refresh the current page by either passing 0 , or by invoking it without an argument:

// The following statements
// both have the effect of
// refreshing the page
window.history.go(0)
window.history.go()
					

You can determine the number of pages in the history stack by looking at the value of the length 特性:

let numberOfEntries = window.history.length
					

接口

History
Allows manipulation of the browser session history (that is, the pages visited in the tab or frame that the current page is loaded in).

范例

The following example assigns a listener to the onpopstate property. And then illustrates some of the methods of the history object to add, replace, and move within the browser history for the current tab.

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: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"
					

规范

规范 状态 Comment
HTML Living Standard
The definition of 'History' in that specification.
实时标准 No change from HTML5 .
HTML5
The definition of 'History' in that specification.
Recommendation 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
History Chrome 1 Edge 12 Firefox 1 IE 10 Opera 3 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
back Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
forward Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
go Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
length Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes
pushState Chrome 5 Edge 12 Firefox 4
4
Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.
IE 10 Opera 11.5 Safari 5 WebView Android ≤37 Chrome Android 18 Firefox Android 4
4
Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.
Opera Android 11.5 Safari iOS 4.3 Samsung Internet Android 1.0
replaceState Chrome 5 Edge 12 Firefox 4
4
Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.
IE 10 Opera 11.5 Safari 5 WebView Android ≤37 Chrome Android 18 Firefox Android 4
4
Until Firefox 5, the passed object is serialized using JSON. Starting in Firefox 6, the object is serialized using the structured clone algorithm . This allows a wider variety of objects to be safely passed.
Opera Android 11.5 Safari iOS 4.3 Samsung Internet Android 1.0
scrollRestoration Chrome 46 Edge 79 Firefox 46 IE No Opera 33 Safari Yes WebView Android No Chrome Android 46 Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android 5.0
state Chrome Yes Edge 12 Firefox Yes IE 10 Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

图例

完整支持
完整支持
不支持
不支持
见实现注意事项。

另请参阅

References

指南

  1. 历史 API
  2. 接口
    1. History