"Go" HTML5 api--no Refresh Update address History.pushstate/replacestate method

(window.location) After the change through JavaScript, the browser will be refreshed to reach your changed URL (location is the meaning of the site). )

And after JavaScript MVC became popular, the way to modify URLs by refreshing them was annoying. In HTML5, however, an API is developed that allows you to modify the URL in a way that does not refresh the browser, which is the history API.

Familiar with the development of JavaScript, the history is certainly not unfamiliar, the most classic method is go, through the first type is an integer transmission parameters, you can make the browser to reach the current page before or after the page has been browsed. Of course, this is also to be refreshed to achieve.

Now the history API added two methods, namely Pushstate and replacestate, in fact, the use of the same, look at the Mozilla document also did not see how different they are, haha.

Use the following:

var state = {//This can be a state object that you want to give the browser, ready for the stateevent behind.

Title: "HTML 5 History API Simple Demo",

URL: "Yourpage"

};

History.pushstate (state, "the HTML 5 history API Simple Demo", "Yourpage");

It is simple, then replacestate is the same usage:

var state = {//This can be a state object that you want to give the browser, ready for the stateevent behind.

Title: "HTML 5 History API Simple Demo",

URL: "Yourpage"};

History.replacestate (state, "the HTML 5 history API Simple Demo", "Yourpage");

State Event

Since there is no way to refresh the URL change, of course, also have to respond to this change of time.

Well, that's right. There is a Popstate event, and the incoming handler function has a parameter, which is the first parameter in the Pushstate, a state obj. Developers can use this state obj to identify behavior. The detailed code is as follows:

var state = {//This can be a state object that you want to give the browser, ready for the stateevent behind.

Title: "HTML 5 History API Simple Demo",

URL: "Yourpage"

};

History.pushstate (state, "the HTML 5 history API Simple Demo", "Yourpage");

Window.onpopstate = function (e) {document.title = E.state.title;}

Of course, you can do this:

var state = {//This can be a state object that you want to give the browser, ready for the stateevent behind.

Action: "Page",

Title: "HTML 5 History API Simple Demo",

URL: "Yourpage"

};

History.pushstate (state, "the HTML 5 history API Simple Demo", "Yourpage");

Window.onpopstate = function (e) {

Switch (e.state.action) {

Case "Home":

Document.title = "HOME ...";

$.get ("index.php"). Done (function (data) {$ ("#wrapper"). HTML (data);});

Break

Case "page":

Document.title = E.state.title;

$.get (E.state.url). Done (function (data) {$ ("#wrapper"). HTML (data);});

Break

}

}

Above this is a combination of pushstate and Ajax to do a navigation corresponding device (Navigation Handler), actually already has a good jQuery plugin, Jquery-pjax (Pushstate and Ajax).

"Go" HTML5 api--no Refresh Update address History.pushstate/replacestate method