HTML5 practice and analysis-history Management (history Object)

Source: Internet
Author: User

HTML5 adds a new management of history, and updates the history object to make it easier to manage historical states. In modern Web applications, you can use the forward and backward buttons to switch historical pages. This allows some new pages that are not opened in the new page to move forward and backward freely, improving the user experience.

Through the haschange event, you can know when the URL parameter changes, that is, when to respond. Through the status management API, you can change the browser URL without loading a new page. Therefore, you must use the history. pushState () method. The history. pushState () method receives three parameters: 1. content to be saved 2. Title (generally an empty string) 3. Address (optional ). Example


  JavaScript code


history.pushState({name: "menglong"}, '', "li.html");


After the history. pushState () method is executed, the new State information is added to the history state stack, and the browser address bar is changed to a new relative URL. However, the browser does not want the server to send requests. Even if the historical status changes, the location. href will return the same address as in the address bar. In addition, the second parameter has not yet been implemented by the browser, so you can just input an empty string or a short title. The first parameter should provide as much information as possible to initialize the page status.

Because the history. pushState () method creates a new historical state, you can also use the "back" button. Press the "back" button to trigger the popstate event of the window object. The event object of the Popstate event has a state attribute, which contains the state object that was originally passed to pushState () with the first parameter. Example


  JavaScript code


Window. addEventListener ('popstate', function (ev) {var state = event. state; if (state) {// when the first page is loaded, the state is empty processState (state) }}, false );


After an object in this state is obtained, the page must be reset to the State indicated by the data in the state object (because the browser will not automatically do this for you ). Remember, the first page loaded by the browser is not in the status, so "back" when a Niu returns the first page loaded by the browser, the event. state value is null.

To update the current historical status, you can call replaceState (). The passed parameters are the same as the first two parameters of the pushState () method. Calling replaceState () does not create a new state in the History state stack, but only overwrites the current state. Example


  JavaScript code


history.replaveState({name: "meng"}, "meng1234");


When using the history state management mechanism of HTML5, make sure that every "fake" URL created using pushState () is used, there is a real and actual URL on the Web server. Otherwise, the "refresh" button on a single machine will cause a 404 error.

Browsers that support HTML5 history status management include Chrome, Safari 5 +, Firefox 4 +, and Opera 11.5 +. In Safari and Chrome, status objects passed to pushState () or replaceState () cannot contain DOM elements. Firefox supports the inclusion of DOM elements in State objects. Opera also supports the history. state attribute, which returns the status object of the current state. The following is a small example of time. In combination with small examples, we can better understand the History Management in HTML5.


  Add href values for History Management



  HTML code


 


  JavaScript code


// Onhashchange: event: the event triggered when the hash value changes // The History Management window appears when the hash value changes. onload = function () {var oInput = document. getElementById ('input1'); var oDiv = document. getElementById ('div1 '); var obj ={}; oInput. onclick = function () {var number = randomNum (35,7); oDiv. innerHTML = number; var oRN = Math. random (); obj [oRN] = number; window. location. hash = oRN ;}; window. onhashchange = function () {var number = obj [window. location. hash. substring (1)] | ''; oDiv. innerHTML = number ;}; function randomNum (all, now) {var arr = []; var newArr = []; for (var I = 1; I <= all; I ++) {arr. push (I) ;}for (var I = 0; I
 
  

  Use the history object in html5.



  HTML code



  

  JavaScript code


// PushState: three parameters: 1. content to be saved 2. title (generally an empty string) 3. address (optional) // history. pushState ({name: "menglong"}, ''," li.html "); window. onload = function () {var oInput = document. getElementById ('input1'); var oDiv = document. getElementById ('div1 '); var iNow = 0; oInput. onclick = function () {var number = randomNum (35,7); oDiv. innerHTML = number; history. pushState (number, '', iNow ++) ;}; window. onpopstate = function (ev) {// historical management changes will trigger var number = ev. state | ''; oDiv. innerHTML = number ;}; function randomNum (all, now) {var arr = []; var newArr = []; for (var I = 1; I <= all; I ++) {arr. push (I) ;}for (var I = 0; I
   
    

The history object of HTML5 practice and analysis is introduced here. For more information about HTML5, see the HTML5 practice and analysis channel of Menglong xiaozhan. Thank you for your support.






Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.