html5的history API

I have to admire the Google Chrome team for using HTML5 and CSS3 to implement a very beautiful online e-book: "20 Things About Browsers and the Internet".

Visit address: http://www.20thingsilearned.com

It has been a long time since this e-book was released, but I still like it after reading it today. We can switch e-book pages back and forth without refreshing the page, which is the perfect embodiment of OPOA (One Page One Application).

I am currently learning about the history API, so I am particularly interested in how they use window.history.pushState() and window.history.replaceState() to switch between pages without refreshing.

I checked some information today and basically have a basic understanding of the history API.

The first thing to say is that history is the overall situation, that is, window.history. You must be familiar with this variable name, because you can often see the JavaScript code using window.history.back() or window.history.go(-1) to return the previous page.

So history is not a new thing. In the era of HTML4, we can use these attributes and methods of it:

length: the number of records in the history stack.

back(): Return to the previous page.

forward(): Forward to the next page.

go([delta]): delta is a number. If it is not written or is 0, refresh this page; if it is a positive number, it will advance to the corresponding number of pages; if it is a negative number, it will go back to the corresponding number of pages.

Now, HTML5 adds the following 2 methods:

pushState(data, title [, url]): Add a record to the top of the history stack. data is an object or null, which will be passed as the state attribute of the parameter when the window's popstate event (window.onpopstate) is triggered; title is the title of the page, but all current browsers ignore this parameter; url is the page's URL, if not written, it will be the current page.

replaceState(data, title [, url]): Change the history of the current page. The parameters are the same as above. This change does not access the URL. However, it is currently only supported by Safari 5.0+, Chrome 8.0+, Firefox 4.0+ and iOS 4.2.1+. If you want to be compatible with old browsers, you can try History.js, and it also fixes some bugs.

Of course, on mobile platforms, we can boldly try the history API of html5. The built-in browsers of ios3.0+ and Android2.0+ platforms are perfect for history. Using it, we can make web apps more like native apps.

Below, I recommend a few articles:

.Manipulating the browser history

.Session history and navigation

.Manipulating History for Fun & Profit