HTML5 actual combat and analysis of history management (history object)

HTML5 has newly added the management of history, and updated the history object to make it more convenient to manage historical status. In modern web applications, users can switch history pages through the "forward" and "back" buttons. This allows some new pages that are not opened in new pages to move forward and back freely, improving user experience.

Through the haschange event, you can know when the parameters of the URL have changed, that is, when you should react. Through the state management API, the browser URL can be changed without loading a new page. So you need to use the history.pushState() method. The history.pushState() method receives three parameters: 1. Content to be stored 2. Title (usually an empty string) 3. Address (optional). A small example is as follows

　JavaScript code##

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

Executed history.pushState () method, the new status information will be added to the historical status stack, and the browser address bar will become the new relative URL. However, the browser does not send a request to the server, and even if the new location.href is checked after the historical status changes, the same address as in the address bar will be returned. In addition, the second parameter is not currently implemented by browsers, so you can just pass in an empty string, or a short title. The first parameter should provide as much information as possible to initialize the page state.

Because the history.pushState() method creates a new historical state, you will find that the "Back" button can also be used. Pressing the "Back" button will trigger the popstate event of the window object. The event object of the Popstate event has a state property, which contains the state object originally passed to pushState() as the first parameter. A small example is as follows

　

JavaScript code##

window.addEventListener('popstate',function(ev){
	var state = event.state;
	if(state){ // 当第一个页面加载的时候state为空
		processState(state)
	}
}, false);

Got this status Object, you must reset the page to the state represented by the data in the state object (because the browser will not do this for you automatically). Remember, the first page loaded by the browser has no state, so when "back" Aniu returns to the first page loaded by the browser, the event.state value is null.

To update the current historical state, you can call replaceState(), and the parameters passed in are the same as the first two parameters of the pushState() method. Calling replaceState() will not create a new state in the historical state stack, it will only overwrite the current state. A small example is as follows

　

JavaScript code

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

When using the historical state management mechanism of HTML5, you need to make sure to use Every "fake" URL created by pushState() has a real, actual URL corresponding to it on the web server. Otherwise, the stand-alone "Refresh" button will result in a 404 error.

Browsers that support HTML5 history state management include 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 including DOM elements in state objects. Opera also supports a history.state property, which returns a state object for the current state. The following is time for small examples. Only by combining small examples can we better understand the history management in HTML5.

　

Add href value to achieve history management　

HTML code

<input type="button" value="35选7" id="input1" />
<p id="p1"></p>

　

JavaScript code

//onhashchange : 事件 : 当hash值改变的时候触发的事件

//hash改变就会出现就会出现历史管理

window.onload = function(){
	var oInput = document.getElementById('input1');
	var op = document.getElementById('p1');
	
	var obj = {};
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		op.innerHTML = number;
		
		var oRN = Math.random();
		
		obj[oRN] = number;
		
		window.location.hash = oRN;
	
	};
	
	
	window.onhashchange = function(){
	
		var number = obj[window.location.hash.substring(1)] || '';
		
		op.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;
	
	}
	
};

　

Passed History object in HTML5 implements history management##　

HTML code

<input type="button" value="35选7" id="input1" />
<p id="p1"></p>

　

JavaScript code

//pushState : 三个参数：1.要存的内容 2.标题(一般写个空的字符串) 3.地址(可选)

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

window.onload = function(){
	var oInput = document.getElementById('input1');
	var op = document.getElementById('p1');
	
	var iNow = 0;
	
	oInput.onclick = function(){
	
		var number = randomNum(35,7);
		
		op.innerHTML = number;

		history.pushState(number,'',iNow++);
	
	};
	
	
	window.onpopstate = function(ev){  //历史管理改变，就会触发
		
		var number = ev.state || '';

		op.innerHTML = number;
		
	};
	
	
	function randomNum(alls,now){
	
		var arr = [];
		var newArr = [];
		
		for(var i=1;i<=alls;i++){
			arr.push(i);
		}
		
		
		for(var i=0;iThe above is the content of HTML5 actual combat and analysis of history management (history object). For more related content, please pay attention to the PHP Chinese website (www .php.cn)!