Detailed description of HTML5 pushstate and popstate operations history, without refreshing changes to the current url, html5pushstate

Detailed description of HTML5 pushstate and popstate operations history, without refreshing changes to the current url, html5pushstate

I. Know window. history

Window. history indicates the history of the window object. It is a global object generated by the user and controlled by javascript scripts. The window object provides access to the history of the browser through the history object. It exposes some very useful methods and attributes, allowing you to freely move forward and backward in history records.

1. forward and backward history records

In the history record, you can do this:

window.history.back();

This is like clicking the back button of the browser.

Similarly, you can move forward, Just Like clicking the forward button in the browser, like this:

 window.history.forward();

2. Move to a specified Historical Record Point

By specifying a value relative to the current page location, you can use the go () method to load the page from the historical records of the current session (the index value of the current page location is 0, and the previous page is-1, the next page is 1 ).

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

 window.history.go(-1);

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

window.history.go(1); 

Similarly, you can move two record points forward by passing the parameter "2. You can view the length attribute value to learn the total number of record points in the history record Stack:

window.history.length;

Ii. Modify historical record points

The new HTML5 API extends window. history to make the history record point more open. You can store the current historical record point, replace the current historical record point, and listen to the historical record point.

1. Store the Current Historical Record Point

The storage method is similar to the Array's inbound stack (Array. push (). A new historical record point is added in window. history, for example:

// The current url is: http://qianduanblog.com/index.htmlvar json = {time: new Date (). getTime ()}; // @ status object: an additional object that records historical records. It can be blank. // @ page title: not supported by all browsers currently. // @ optional url: the browser does not check whether the url exists. It only changes the url. The url must be in the same domain and cannot be cross-origin window. history. pushState (json, "", "http://qianduanblog.com/post-1.html ");

After the pushState method is executed, the url of the page is http://qianduanblog.com/post-1.html.

2. Replace the current historical record point

Window. history. replaceState and window. history. pushState is similar. The difference is that replaceState is not in window. A New Historical Record Point is added in history. The effect is similar to window. location. replace (url) does not add a new record point in the Historical Record Point. The replaceState () method is especially suitable when you want to update the status object or URL of the current history record in response to some user operations.

3. Listen to historical record points

Listening to historical record points can be regarded as listening for URL changes, but the URL hash part will be ignored. Listening to the URL hash part, HTML5 has a new API called onhashchange, I also mentioned in my blog that this method is compatible with cross-browser solutions. You can use window. onpopstate to listen for url changes and obtain the State object stored in this historical record point, which is the json object mentioned above, for example:

// The current url is: http://qianduanblog.com/post-1.htmlwindow.onpopstate=function () {// get the json object var json = window stored in this historical record point. history. state; // click back once to: http://qianduanblog.com/index.html // get json is null // Click again to move forward to: http://qianduanblog.com/post-1.html // get json as {time: 1369647895656 }}

It is worth noting that executing window. history. pushState and window. history. replaceState in javascript scripts will not trigger the onpopstate event.

Note that Google and Firefox have different responses when they are opened on the page for the first time. Google is surprised that the onpopstate event is triggered, but Firefox does not.

The above is a brief introduction to the pushstate and popstate operations history of HTML5, which can be helpful to you without changing the current url. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!