Shulou(Shulou.com)06/03 Report--

This article mainly shows you "how to use history in HTML5", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use history in HTML5" this article.

I. get to know window.history

Window.history represents the history of window objects and is a global object that is actively generated by the user and controlled by javascript scripts. The window object provides access to the browser history through the history object. It exposes some very useful methods and attributes that allow you to move forward and backward freely in your history.

1. The advance and retreat of historical records

To step back in history, you can do this:

Window.history.back ()

It's like the user clicks the browser's back button.

Similarly, you can move forward, like clicking the forward button in a browser, 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 location index value is 0, the previous page is-1, and the next page is 1).

To go back one page (equivalent to calling back ()):

Window.history.go (- 1)

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

Window.history.go (1)

Similarly, pass the parameter "2" and you can move 2 record points forward. You can check the value of the length property to see how many record points there are in the history stack:

Window.history.length

Second, modify the history record point

HTML5's new API extends window.history to make history points more open. You can store current history points, replace current history points, and monitor history points, which are briefly described one by one below.

1. Store the current history point

The storage is similar to the Array.push () of the array, adding a history point to the window.history, for example:

/ / the current url is: http://qianduanblog.com/index.htmlvar json= {time:new Date () .getTime ()} / / @ status object: extra object for recording history points, can be empty / / @ page title: currently all browsers do not support / / @ optional url: browsers will not check whether url exists, only change url,url must be in the same domain, not cross-domain window.history.pushState (json, "," http://qianduanblog.com/post-1.html");)

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

2. Replace the current history point

Window.history.replaceState is similar to window.history.pushState, except that replaceState does not add a new history point to window.history. Its effect is similar to _ window.location.replace (url). It does not add a new record point to the history point. The replaceState () method is especially appropriate when you want to update the status object or URL of the current history entry in response to some user actions.

3. Monitor history points

Monitoring history points can intuitively be thought of as listening for changes in URL, but ignore the hash part of URL, monitor the hash part of URL, HTML5 has a new API as onhashchange, and my blog also talks about this method and cross-browser compatible solutions. You can listen for changes in url through _ window.onpopstate, and you can get the state object stored at the history point, that is, the json object mentioned above, such as:

/ / the current url is: http://qianduanblog.com/post-1.html_window.onpopstate=function(){ / / get the json object var json=window.history.state stored in this history point / / Click once to go back to: http://qianduanblog.com/index.html / / the json obtained is null / / Click to advance to: http://qianduanblog.com/post-1.html / / get json as {time:1369647895656}}

It is worth noting that the execution of window.history.pushState and window.history.replaceState by javascript scripts does not trigger the onpopstate event.

Another thing to note is that Google browser and Firefox react differently when the page is opened for the first time. Google browser strangely triggers the onpopstate event, while Firefox does not.

The above is all the contents of the article "how to use history in HTML5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.