When I was on the ** net, I found that the effects of login and registration animations were very gorgeous, but I was shocked by the fact that the page was capable of refreshing the new jump, and I reviewed my front-end knowledge, there seems to be no technology to achieve this, So Baidu once discovered that this was originally achieved using HistoryAPI in HTML5, I found that the effects of logging on to and registering an animation were very gorgeous, but I was shocked that the page was capable of refreshing the new jump (a new version has been made. To view this effect, I can slam here: GitHub or read FM ), looking back at the front-end knowledge, there seems to be no technology to achieve this, So Baidu once found that this was originally achieved using the History API in HTML5, however, it has never been useful. This technology was not applied until the blog was revised.
In HTML5,
1. added the function of adding a project to the browser history through JS.
2. the URL in the browser's address bar is displayed without refreshing the page.
3. Add events triggered when the user clicks the back button of the browser.
With the above three points, you can dynamically change the URL in the browser's address bar without refreshing the page and dynamically display the page content.
For example, if the content of page A is different from that of page B before HTML5, if you switch from page A to page B, you need to switch from page A to page B in the browser, or, if you need the back button function, you can add # XXXX in the URL address to implement the back function. Now in HTML5, you can use the History API to implement the following processing:
1. Send an AJAX request to request B data on page.
2. Load the corresponding information to the corresponding location through JS in page.
3. Use the History API to switch from the URL of page A to the URL of page B in the address bar of the browser without refreshing the page.
History API in HTML4
Attribute
1. length: the number of historical items. The history that javascript can handle is limited to the range that the browser's "Forward" and "backward" keys can go. This attribute returns the sum of the number of addresses included under the "Forward" and "back" buttons.
Method
1. back () is equivalent to pressing the "back" key.
2. forward () is equivalent to pressing the forward key.
3. go () usage: history. go (x); go to the specified address in the historical range. If x <0, x addresses are removed. If x> 0, x addresses are forwarded. If x = 0, the current web page is refreshed. History. go (0) is equivalent to location. reload.
History API in HTML5
1. history. pushState (data, title [, url]): adds a record to the top of the history record stack. data is passed as a parameter when an onpopstate event is triggered. title is the page title, this parameter is ignored by all browsers. The url is the page address. Optional. The default value is the current page address.
2. history. replaceState (data, title [, url]): changes the current history. The parameters are the same as above.
3. history. state: used to store data of the preceding method. Different browsers have different read/write permissions.
4. popstate event: this event is triggered when you click the back or forward button of the browser. Read the state attribute value of the event object that triggers the event in the event handler function. The attribute value is the first parameter value used to execute the pushState method, it saves the objects that are synchronized and saved by adding records to the browser history.
So far, IE10, firefox4 and later versions, chrome 8 and later versions, Safari5, and Opera11 browsers support the History API in HTML5.
HTML:
The Code is as follows:
New Document
