HTML5 pushstate, popstate operation history, no refresh change the current URL

Pushstate method One, recognize Window.history

window.historyRepresents the history of the Window object, which is generated by the user and accepts the global object controlled by the JavaScript script. The Window object history provides access to the browser history through the object. It exposes some very useful methods and properties that allow you to move forward and backward in history.

1. Advance and retreat of historical records

Back in the history, you can do this:

Window. History. Back (); 

This is just like when the user clicks the browser's Back button.

Similarly, you can move forward, just like in the browser by clicking the Forward button, like this:

Window. History. Forward (); 

2. Move to the specified history point

By specifying a value relative to the current page position, you can use the Go () method to load the page from the history of the current session (the current page position index value is 0, the previous page is 1, and the next page is 1).

To rewind a page (equivalent to calling back ()):

Window. History. Go (-1);  

Move forward one page (equivalent to calling Forward ()):

Window. History. Go (1); 

Similarly, passing the parameter "2" allows you to move the 2 record points forward. You can view the length property value to see how many record points there are in the history stack:

Window. History. Length; 

Second, modify the history point

HTML5 's new API expands the Window.history, making the history point more open. You can store the current history point, replace the current history point, listen to the history point, and briefly explain below.

1. Store the current history point

stored in a way similar to the array's in-Stack ( Array.push() ), a new history point is added to the window.history, for example:

1 // The current URL is:/http Qianduanblog.com/index.html2 var json={ time:new Date (). GetTime ()};3 // @ state object: Extra object that records the history point, can be empty 4 // @ Page title: Currently all browsers do not support 5 // @ Optional URL: The browser does not check whether the URL exists, Only change url,url must be the same domain, cannot cross domain 6 window.history.pushstate (Json,     

After the Pushstate method is executed, the URL address of the page is http://qianduanblog.com/post-1.html.

2. Replace the current history point

window.history.replaceStateand window.history.pushState Similar, the difference is that there replaceState window.history is no new history point in it, and the effect window.location.replace(url) is similar to not adding a record point to the history point. This is especially appropriate when you want to update the status object or URL of the current history entry in response to certain actions of the user replaceState() .

3, Listening history point

Listening to the history point, the intuitive can be considered as the change of the listener URL, but will ignore the hash part of the URL, listen to the hash portion of the URL, HTML5 has a new API for onhashchange , my blog also has to say that the method and cross-browser compatible solutions. You can window.onpopstate listen for changes to the URL, and you can get the state object stored in that history point, which is the JSON object mentioned above, such as:

 1//The current URL is: http://qianduanblog.com/post-1.html2Window.onpopstate=function () 3 {4 // Get the JSON object stored at the history point 5 var json=window.history.state ; 6 // Click once to return to:/HTTP qianduanblog.com/index.html 7 // The JSON obtained is null 8 // Click again to proceed to: http:/ /qianduanblog.com/post-1.html 9 //  get JSON {Time:1369647895656}10}       

It is important to note that JavaScript scripts execute window.history.pushState and window.history.replaceState do not trigger onpopstate events.

Also note that the Google browser and Firefox browser in the first open the response is different, Google Browser is strange to trigger the onpopstate event, and Firefox does not.

HTML5 pushstate, popstate operation history, no refresh change the current URL