A detailed explanation of the use of history new characteristics in HTML5

I. Scene reappearance

As you know, Ajax can achieve a page without the refresh operation, but it will cause two of ordinary page operations (there is a refreshing change in the page) there is a significant difference between the--url did not modify and can not use the forward, Back button. For example, common Ajax pagination, on the first page click on the second page of the link, the Ajax page after the browser address bar is displayed on the URL is still the first page of the URL, use the back button can not go back to the first page. The change of URL represents an identity, in the traditional Web experience, the change of content along with the change of URL, url change, forward and back button between the three more form a unique navigation experience, and Ajax destroyed this experience will inevitably cause inconvenience to users.

Of course, very early on, the witty front-end engineers have figured out a solution, the most common is to use hash--at the end of the URL to add a shape such as "#xxx" logo, and then use Onhashchange and other ways to monitor the hash value changes to make the corresponding treatment.

Very troublesome? Yes, so there are a couple of features in HTML5 History that you can gracefully address these issues!

Two. New characteristics of HTML5 History

The History object was introduced from the HTML4, HTML5 added Pushstate, replacestate two methods, and Popstate events. A few simple introductions are given below.

1. Pushstate () method
The role of Pushstate () is to press a record into the history stack, which has three parameters:

State object--An object that holds the status information, and when the Popstate event is triggered, a copy of the corresponding States object is included in the Popstate event object's property. The state object has a small capacity (which is forced to 640k in Firefox) and it is recommended that you use Localstorage or sessionstorage if you need to store larger data.

title--is the title of the page that is pressed into the history record, which is temporarily ignored by all browsers and can be used to fill in the blanks or a short title in the actual development.

url--the address of a new history, either a relative or an absolute path, or a relative path with the current URL as the base.

2. Replacestate () method
The Replacestate () method is similar to the Pushstate () method, and the parameters are the same as pushstate (), but the Replacestate () method modifies the current history rather than creating a new record, so the state that needs to update the current history Object or URL, it is more appropriate to use this method.

3. The Popstate incident
The Popstate event is triggered on the Window object when the history of the activation changes (such as forward, rewind, call pushstate, or Replacestate method). As described above, if the active history is created by Pushstate or modified by the replacestate, the state attribute of the Popstate event will contain a copy of the corresponding States object, which the developer can save before calling them in the Popstate callback The information in the state object.

It's worth noting that Chrome will create popstate events while opening the page (including the first time the page is open) and the page is refreshed, and Firefox will not, which can be a bit of a hassle for development, but here's a solution.

4. Browser compatible
Features Chrome Firefox (Gecko) Internet Explorer Opera Safari
Pushstate, Replacestate 5 4.0 (2.0) 10 11.50 5.0
History.state 18 4.0 (2.0) 10 11.50 6.0

Three. Enhance the Ajax experience with the new features of History

The enhancement experience here, in essence, is to solve the two problems mentioned at the beginning of the article--ajax the URL is not modified when the page is changed and the forward and backward functions are invalid.

Looking at the above method, I believe that we have been able to think of the basic solution, nothing more than the Ajax demand when the pushstate a record to the history of the record, and then in the Popstate callback function to make the corresponding processing. Of course, in order to actually get a better experience, the content to be done is still more complicated. Here's an example of Ajax paging, which provides a complete idea:

Each time you use Ajax to get a new page, use Pushstate () to press the URL of the new page into the top of the history stack.
Listens for popstate events, when the user advances or backs in the callback based on the forward or backward URL to reuse Ajax to get the page content, Ajax forward and backward.
When Chrome opens the page and refreshes the page, it generates popstate events that cause unwanted AJAX requests, so it is necessary to use the URL in popstate to determine whether the user is clicking Forward or backward, or to open or refresh the page, triggering Ajax to get the corresponding Content.
Basic code

The code is as follows

Copy Code

Define Ajax to get the paging method, no specific content is listed here function Turnpage (URL) { // ... } Define a callback for Popstate if (history.pushstate) {//Determine if the browser supports Pushstate CurrentState is used to record the page URL before the popstate is generated, and initialize CurrentState as the current link when the page is loaded var currentstate = window.location.href; Window.addeventlistener (' Popstate ', function (event) { _currenturl is used to record the page URL when popstate is generated var _currenturl = window.location.href; /* To determine whether CurrentState and _currenturl are the same, * If the same means that this popstate generated before and after the page URL has not changed, * That is, the page is the first time to load the page or be refreshed, without triggering a new Ajax request, * If the difference indicates that the URL has changed, this is triggered Ajax to get content */ if (CurrentState!= _currenturl) { Console.log (' Get new paging '); Turnpage (_currenturl); Re-obtain paging content based on current URL CurrentState = _currenturl; Update CurrentState } }); } Bind fixed-point hit paging generate Ajax request Click the paging link to get the URL for Currentlink, generating an Ajax request Turnpage (Currentlink); Call Pushstate () Press new record if (history.pushstate) {//Determine if the browser supports Pushstate Press the new record into the history record, the URL on the browser's address bar will be modified to the new URL at the same time History.pushstate (null, Document.title, currentlink); CurrentState = window.location.href; Update currentstate as current URL when paging }

This site has been based on the above ideas for the enhancement of Ajax paging, the specific situation is as follows:

Opens the page with the URL displaying the URL of the home page

Click on the second page link to trigger Ajax paging, call Pushstate in Ajax (), and you can see that the URL has been modified to the URL of the second page

Click the Back button, the URL address becomes the first page, and then the popstate callback triggers Ajax to get the first page content.

This allows you to both absorb the benefits of a local refresh page while preserving the traditional URL navigation experience. For browsers that do not support pushstate, you can use a progressive enhancement design to ignore these browsers, which, after all, is an enhanced experience; Of course, if you have to take care of those browsers, you can replace them with a hash scheme.