Historical management of HTML5 actual combat and Analysis (History object)

HTML5 new management of History, updated the history object to make the management of historical state more convenient. In modern Web applications, users can switch historical pages with the forward and back buttons. This allows some new pages that are not open in the new page to move back and forth, improving the user experience.

With the Haschange event, you can tell when the parameters of the URL have changed, that is, when to react. Through the state-managed API, you can change the URL of the browser without loading a new page. So you need to use the History.pushstate () method. The History.pushstate () method receives three parameters: 1. What to save 2. Title (usually empty string) 3. Address (optional). Small examples are as follows

　　JavaScript code

History.pushstate ({name: "Menglong"}, "'," li.html ");

Once the History.pushstate () method is executed, the new status information is added to the history stack, and the browser address bar becomes the new relative URL. However, the browser does not want the server to send requests, even if the historical state changes after the new location.href will return the same address as the address bar. In addition, the second parameter currently does not have a browser implementation, so you can simply pass in an empty string, or a short title can also. The first parameter should provide as much information as necessary to initialize the state of the page.

Because the History.pushstate () method creates a new history state, you will find that the back button is also available. Pressing the back button triggers the Popstate event for the Window object. The event object for the Popstate event has a state property that contains the status object that was originally passed to Pushstate () with the first argument. Small examples are as follows

　　JavaScript code

Window.addeventlistener (' Popstate ', function (EV) {var state = Event.state;if (state) {// When the first page loads, the state is empty processstate (state)}}, False);

After you get the object of this state, you must reset the page to the state represented by the data in the state object (because the browser does not do this for you automatically). Remember that the first page loaded by the browser has no state, so "back" the Event.state value is null when the first page loaded by the browser is returned.

To update the current history state, you can call Replacestate (), which has the same parameters as the first two parameters of the Pushstate () method. Calling Replacestate () does not create a new state in the historical state stack, only overrides the current state. Small examples are as follows

　　JavaScript code

History.replavestate ({name: "Meng"}, "meng1234");

When using HTML5 's historical state management mechanism, it is necessary to ensure that each "fake" url created by Pushstate () is used, and that there is a true, actual URL corresponding to the Web server. Otherwise, a single "refresh" button causes a 404 error.

Browsers that support HTML5 history state management are chrome, Safari 5+, Firefox 4+, and opera 11.5+. In Safari and Chrome, the state object passed to Pushstate () or replacestate () cannot contain DOM elements. Firefox supports the inclusion of DOM elements in the state object. Opera also supports a History.state property that returns the state object of the current state. Here is a small example of time, combined with small examples to better understand the history of HTML5 management.

　　Add href value for historical management

　　HTML code

<input type= "button" value= "35 Select 7" id= "INPUT1"/><div id= "Div1" ></div>

　　JavaScript code

Onhashchange: Event: Event triggered when the hash value is changed//hash change will occur when history management Window.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 (alls,now) {var arr = [];var NEWARR = [];for (var i=1;i<=alls;i++) {Arr.push (i);} for (Var i=0;i<now;i++) {Newarr.push (Arr.splice (Math.floor (Math.random () *arr.length), 1));} return NEWARR;};

　　Historical management through the history object in HTML5

　　HTML code

<input type= "button" value= "35 Select 7" id= "INPUT1"/><div id= "Div1" ></div>

　　JavaScript code

Pushstate: Three parameters: 1. Content to be saved 2. Title (usually 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) {  ////History management changes, will trigger var number = Ev.state | | "; odiv.innerhtml = number;}; function Randomnum (alls,now) {var arr = [];var NEWARR = [];for (var i=1;i<=alls;i++) {Arr.push (i);} for (Var i=0;i<now;i++) {Newarr.push (Arr.splice (Math.floor (Math.random () *arr.length), 1));} return NEWARR;};

HTML5 actual combat and analysis of historical management (History object) for everyone to introduce here, more about HTML5 related small content in the Dream Dragon Station HTML5 actual combat and analysis channels. Thank you for your support.