HTML5 history new features pushstate, replacestate

Starting with HTML5, we can start manipulating this history stack.

the Window object in the DOM provides a read of the browser history through the Window.history method, allowing you to move forward and backward in the user's access record.

1.History

Use Back (), forward (), and Go () methods to move forward and backward in the user's history

Forward and backward

Back off:

Window.history.back ();

This method will be the same as when the user clicked the Back button on the browser toolbar.

Similarly, you can generate user forward behavior in the following ways:

Window.history.forward ();

Move to a specific location in the history

You can use the Go () method to load specific pages from the session history.

Move backward one page:

Window.history.go (-1);

Move forward one page:

Window.history.go (1);

Similarly, you can move forward or back multiple pages.

You can also find the total number of pages in the history stack by checking the length property of the browser history.

var numberofentries = window.history.length;

Note: IE supports passing URL parameters to the Go () method.

2. Adding and modifying a history entity

Introduced since Gecko2 (Firefox 4/thunderbird 3.3/seamonkey 2.1)

HTML5 introduces two methods, Histtory.pushstate () and History.replacestate (), which allow you to add and modify history entities. At the same time, these methods work with the Window.onpostate event.

Use the History.pushstate () method to modify the referrer, which can be used in the HTTP header created for the XMLHttpRequest object after the modified state. This referrer will be the URL of the document when the XMLHttpRequest is created.

Pushstate is used to add records for the current page to history, and replacestate and Pushstate are exactly the same, except that it is used to modify the record of the current page in history.

Example

Suppose the http://mozilla.org/foo.html page executes a bit JS

var stateobj = {foo: "Bar"}; History.pushstate (Stateobj, "Page 2", "bar.html");

This method will make the URL address bar display http://mozilla.org/bar.html, but the browser will not load the bar.html page, even if the page exists and does not load.

Now again, assume that the user continues to access http://google.com and then click Back. At this point, the URL address bar will be, http://mozilla.org/bar.html, the page will get Popstate event (Chrome), this state object will contain a stateobj copy. This page looks like foo.html. +

At this point, we click Back again, the URL will become http://mozilla.org/foo.html,document will get another popstate event and a null state object. The return action did not change the contents of the document. (maybe after a while trying to load ... chrome)

Pushstate method

Pushstate () has three parameters: state object, caption (now ignored, not processed), URL (optional). Specific details:

          –state object is a object, which relates to the new >pushstate method ( 50,62,50); " >history the entity. To store information about the entries you want to insert into the history state object can be any json string. Because firefox uses the user's hard disk to access state object, the maximum storage space for this object is 640k . If greater than this number pushstate () The method throws an exception. If you do need more space to store, use local storage.

         -firefox now ignores this parameter, although it may be used in the future. The safest way to use it now is to pass an empty string to prevent future modifications. Or you can send a short title to represent

         - This parameter is used to pass the new history entity method loads the url . For example, after the user restarts the browser, the new url may not be an absolute path. If it is a relative path, then it will be relative to the existing url . The new url must be the same as the existing pushstate () throws an exception. This parameter is optional, and if empty, it will be set to document current url .

In a sense, calling the Pushstate () method is much like setting up window.location = "#foo", both creating and activating another history entity associated to the current document, but Pushstate () has some advantages:

L The new URL can be any URL of the same domain as the current URL, in contrast, if only set hash,window.location will remain in the same document.

L if not, you can not modify the URL. In contrast, set window.location = "#foo"; only the new history entity is generated, if your current hash is not #foo

L You can associate any data with your new history entity. Using a hash-based approach, you need to encode all the relevant data into a short string.

Note that the Pushstate () method does not cause hashchange time to occur, even if the old and new URLs are just hash different.

Replacestate () method

History.replacestate () is used very much like pushstate (), except that replacestate () is used to modify the current history entity instead of creating a new one. This method can sometimes be useful when you want to update a state object or the current history entity when you need to react to some user behavior, and use it to update the URL of the state object or the current history entity.

Popstate Events

The Popstate event will occur when the history entity is changed. If the history entity is produced by the Pushstate and Replacestate methods, the State property of the Popstate event contains a copy of the state object from the history entity

See Window.onpopstate

Reads the current state

Read existing State

When the page loads, it may have a non-empty state object. This can happen when the user restarts the browser after the page sets a state object (using Pushstate or replacestate). When the page reloads, the page receives the OnLoad event, but there is no popstate event. However, if you read the History.state property, the state object will be obtained after the Popstate event occurs

This article is from the "beautiful Dē‖java Question" blog, please be sure to keep this source http://teny32.blog.51cto.com/8027509/1761452

HTML5 history new features pushstate, replacestate