Manipulating the browser history

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

and ) and provides functionality global to the document (such as obtaining the page’s URL and creating new elements in the document).” style=”margin: 0px; padding: 0px; border: 0px; color: rgb(0, 149, 221); text-decoration: none;”>document only if you modify only the hash.

  • You don’t have to change the URL if you don’t want to. In contrast, setting window.location = "#foo"; only creates a new history entry if the current hash isn’t #foo.
  • You can associate arbitrary data with your new history entry. With the hash-based approach, you need to encode all of the relevant data into a short string.

Note that pushState() never causes a hashchange event to be fired, even if the new URL differs from the old URL only in its hash.

The replaceState() method

history.replaceState() operates exactly like history.pushState() except that replaceState() modifies the current history entry instead of creating a new one.

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.

Note: In Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) through Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), the passed object is serialized using JSON. Starting in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), the object is serialized using the structured clone algorithm. This allows a wider variety of objects to be safely passed.

The popstate event

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 topushState or affected by a call to replaceState, the popstate event’s state property contains a copy of the history entry’s state object.

See window.onpopstate for sample usage.

Reading the current state

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() orreplaceState()) and then the user restarts her browser.  When your page reloads, the page will receive an onload event, but no popstate event.  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:

var currentState = history.state;

Examples

For a complete example of AJAX web site, please see: Ajax navigation example.

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
replaceState, pushState 5 4.0 (2.0) 10 11.50 5.0
history.state 18 4.0 (2.0) 10 11.50 6.0
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s