Detailed explanation of html5 pushstate, popState operation history, brushless refresh changing the current url

Window.history represents the historical records of the Window object, which is actively generated by users and accepted the global object controlled by JavaScript script. The Window object provides access to the historical record of the speaker through the History object. It exposes some very useful methods and attributes, allowing you to move forward and retreat freely in historical records.

Retreat in the historical record, you can do this:

 window.history.back ();

This is like a user click the back button of the browser.

Similarly, you can go forward, just like clicking the forward button in the browser, like this:

 window.history.Forward ();

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

To retreat one page (equivalent to calling ()):):

 Window.history.go (-1);

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

 Window.history.go (1);

Similar, pass parameter 2, you can move forward 2 record points. You can view the LENGTH attribute value, and how many record points are there in the historical record stack:

 window.history.length;

HTML5's new API has extended Window.history, making the historical record point more open. You can store the current historical records, replace the current historical records, and monitor historical record points. Let's briefly explain one by one.

The stored method is similar to the array of the stack (ARRAY.Push ()), and a new historical record point is added to the Window.history, such as::

 // The current url is: http://qianduanblog.com/index.htmlvar json = {time: new date (). Gettime ()}; @//: At present, all browsers do not support @ @//: The browser does not check whether URL exists, but only changes the URL. URL must be the same domain. , http: //qianduanblog.com/post -html);

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

Window.history.replaceState is similar to Window.history.pushState. The difference is that replacestate will not add a new historical record point in Window.history. The effect is similar to Window.Location.RePlace (URL). A record point is added to the record point. When you need to update the status object or URL of the current historical record entry in response to certain operations of the user, using the replaceState () method is particularly appropriate.

The historical record point of monitoring, intuitive can be considered to be the change of URL, but it will ignore the Hash part of the URL, listen to the HASH part of the URL, HTML5 has a new API as onhashchange. I also say that this method and cross -browser in my blog are also said to this method and crossbrowler. Compatible solutions. You can listen to the changes of the URL through Window.onPopState, and you can get the status object stored at the historical record point, which is the JSON object mentioned above, such as:

 // The current url is: http://qianduanblog.com/post -htmlwindow.onpopState=Function () {// Get the json object stored at the historical record point var json = window.history.state; // Click to return to: http://qianduanblog.com/index.html // The json obtained is null // again. {Time: 1369647895656}}

It is worth noting that: JavaScript script executes window.history.pushstate and window.history.replaceState does not trigger the onPopState event.

It is also important to note that the reaction of Google browser and Firefox browser on the page for the first time is different. Google browser strange is to recover the onPopState event, while the Firefox browser will not.

The above is the detailed explanation of the Pushstate and PopState operations of HTML5. The brushless refresh changes the current URL. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!