HTML5 API-Refresh update Address history. pushstate/replacestate Method

Javascript advancedProgramAs mentioned in design (version 2), location. Path/query in Bom ...... (Window. Location) after being changed through JavaScript, the browser will refresh the URL you changed (location means location ..)

Since JavaScript MVC began to become popular, the method of modifying the URL through refresh made people feel annoyed. However, HTML5 creates an API that can be used to modify the URL without refreshing the browser, that is, the history API.

Those familiar with Javascript development are certainly familiar with history. The most classic method is go. The first transmission parameter of the integer type allows the browser to arrive before or after the current page, pages that have been browsed. Of course, this is also implemented by refresh.

Now, two methods are added to the history API, pushstate and replacestate. In fact, they are used in the same way. You cannot see the differences between them in Mozilla documents. Haha.

The usage is as follows:

VaR state = {// you can give the browser a State object to prepare for the subsequent stateevent.

Title: "HTML 5 history API simple demo ",

URL: "yourpage"

};

History. pushstate (state, "HTML 5 history API simple demo", "yourpage ");

It's easy, so replacestate is also used:

VaR state = {// you can give the browser a State object to prepare for the subsequent stateevent.

Title: "HTML 5 history API simple demo ",

URL: "yourpage "};

History. replacestate (state, "HTML 5 history API simple demo", "yourpage ");

State event

Since there are no methods to refresh and change the URL, of course there is time to respond to this change.

Well, that's right. There is a popstate event, and the input handler function has a parameter, that is, the first parameter in pushstate, a State obj. Developers can use this state OBJ to identify behavior. DetailsCodeAs follows:

VaR state = {// you can give the browser a State object to prepare for the subsequent stateevent.

Title: "HTML 5 history API simple demo ",

URL: "yourpage"

};

History. pushstate (state, "HTML 5 history API simple demo", "yourpage ");

Window. onpopstate = function (e) {document. Title = E. State. Title ;}

You can also do this:

VaR state = {// you can give the browser a State object to prepare for the subsequent stateevent.

Action: "page ",

Title: "HTML 5 history API simple demo ",

URL: "yourpage"

};

History. pushstate (state, "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;

}

}

The above is a navigation handler (navigation handler) combined with pushstate and Ajax. In fact, there is already a good jquery plug-in, jquery-pjax (pushstate and Ajax ).