HTML5 introduced the
pushState()
and
replaceState()
methods for add and modifying history entries, respectively. These methods work in conjunction with the
onpopstate
事件。
使用
pushState()
changes the referrer that gets used in the HTTP header for
XMLHttpRequest
objects created after you change the state. The referrer will be the URL of the document whose window is
this
at the time of creation of the
XMLHttpRequest
对象。
Suppose
http://mozilla.org/foo.html
executes the following JavaScript:
let stateObj = {
foo: "bar",
}
history.pushState(stateObj, "page 2", "bar.html")
This will cause the URL bar to display
http://mozilla.org/bar.html
, but won't cause the browser to load
bar.html
or even check that
bar.html
exists.
Suppose now that the user navigates to
http://google.com
, then clicks the
Back
button. At this point, the URL bar will display
http://mozilla.org/bar.html
and
history.state
will contain the
stateObj
。
popstate
event won't be fired because the page has been reloaded. The page itself will look like
bar.html
.
If the user clicks
Back
once again, the URL will change to
http://mozilla.org/foo.html
, and the document will get a
popstate
event, this time with a
null
state object. Here too, going back doesn't change the document's contents from what they were in the previous step, although the document might update its contents manually upon receiving the
popstate
事件。
注意：
调用
history.back()
normally behaves the same way as clicking the
Back
button. But there is one important exception:
后于
使用
history.pushState()
, calling
history.back()
does not
引发
popstate
event. Clicking the browser's
Back
button (still) does.
pushState()
takes three parameters: a
state
对象
; a
title
(currently ignored); and (optionally), a
URL
.
Let's examine each of these three parameters in more detail.
pushState()
. Whenever the user navigates to the new state, a
popstate
event is fired, and the
state
property of the event contains a copy of the history entry's state object.
pushState()
, the method will throw an exception. If you need more space than this, you're encouraged to use
sessionStorage
and/or
localStorage
.
pushState()
, but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise,
pushState()
will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.
In a sense, calling
pushState()
is similar to setting
window.location = "#foo"
, in that both will also create and activate another history entry associated with the current document.
But
pushState()
has a few advantages:
window.location
keeps you at the same
document
only if you modify only the hash.
window.location = "#foo";
creates a new history entry only if the current hash isn't
#foo
.
title
is subsequently used by browsers, this data can be utilized (independent of, say, the hash).
注意，
pushState()
never causes a
hashchange
event to be fired, even if the new URL differs from the old URL only in its hash.
在 XUL document, it creates the specified XUL element.
In other documents, it creates an element with a
null
namespace URI.
history.replaceState()
operates exactly like
history.pushState()
，除了
replaceState()
modifies the current history entry instead of creating a new one. Note that this doesn't prevent the creation of a new entry in the global browser history.
replaceState()
is particularly useful when you want to update the state object or URL of the current history entry in response to some user action.
Suppose
http://mozilla.org/foo.html
executes the following JavaScript:
let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")
The explanation of these two lines above can be found at the above section pushState() 方法范例 章节。
Next, suppose
http://mozilla.org/bar.html
executes the following JavaScript:
history.replaceState(stateObj, "page 3", "bar2.html")
This will cause the URL bar to display
http://mozilla.org/bar2.html
, but won't cause the browser to load
bar2.html
or even check that
bar2.html
exists.
Suppose now that the user navigates to
http://www.microsoft.com
, then clicks the
Back
button. At this point, the URL bar will display
http://mozilla.org/bar2.html
. If the user now clicks
Back
again, the URL bar will display
http://mozilla.org/foo.html
, and totally bypass
bar.html
.
A
popstate
event is dispatched to the window every time the active history entry changes. If the history entry being activated was created by a call to
pushState
or affected by a call to
replaceState
，
popstate
event's
state
property contains a copy of the history entry's state object.
见
Window.onpopstate
for sample usage.
When your page loads, it might have a non-null state object. This can happen, for example, if the page sets a state object (using
pushState()
or
replaceState()
) and then the user restarts their browser. When the page reloads, the page will receive an
onload
event, but no
popstate
事件。
However, if you read the
history.state
property, you'll get back the state object you would have gotten if a
popstate
had fired.
You can read the state of the current history entry without waiting for a
popstate
event using the
history.state
property like this:
let currentState = history.state