HTML5 실전 및 이력관리 분석(이력객체)

HTML5에는 이력 관리 기능이 새롭게 추가되었으며, 이력 객체를 업데이트하여 이력 상태를 더욱 편리하게 관리할 수 있게 되었습니다. 최신 웹 애플리케이션에서 사용자는 "앞으로" 및 "뒤로" 버튼을 통해 기록 페이지를 전환할 수 있습니다. 이를 통해 새 페이지에서 열리지 않은 일부 새 페이지가 자유롭게 앞뒤로 이동할 수 있어 사용자 경험이 향상됩니다.

haschange 이벤트를 통해 URL 매개변수가 언제 변경되었는지, 즉 언제 반응해야 하는지 알 수 있습니다. 상태 관리 API를 통해 새 페이지를 로드하지 않고도 브라우저 URL을 변경할 수 있습니다. 따라서 History.pushState() 메서드를 사용해야 합니다. History.pushState() 메소드는 세 가지 매개변수를 받습니다: 1. 저장할 콘텐츠 2. 제목(일반적으로 빈 문자열) 3. 주소(선택 사항). 작은 예는 다음과 같습니다

　JavaScript 코드

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

실행 내역 .pushState () 메서드를 사용하면 새 상태 정보가 기록 상태 스택에 추가되고 브라우저 주소 표시줄이 새 상대 URL이 됩니다. 그러나 브라우저는 서버에 요청을 보내지 않으며, 기록 상태가 변경된 후 새로운 location.href를 확인하더라도 주소 표시줄과 동일한 주소가 반환됩니다. 또한 두 번째 매개변수는 현재 브라우저에서 구현되지 않으므로 빈 문자열이나 짧은 제목만 전달할 수 있습니다. 첫 번째 매개변수는 페이지 상태를 초기화하기 위해 가능한 많은 정보를 제공해야 합니다.

history.pushState() 메소드는 새로운 기록 상태를 생성하므로 "뒤로" 버튼도 사용할 수 있음을 알 수 있습니다. "뒤로" 버튼을 누르면 창 개체의 popstate 이벤트가 트리거됩니다. Popstate 이벤트의 이벤트 개체에는 원래 pushState()에 첫 번째 매개 변수로 전달된 상태 개체가 포함된 상태 속성이 있습니다. 작은 예는 다음과 같습니다

　JavaScript 코드

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

알겠습니다 상태 개체의 경우 페이지를 상태 개체의 데이터가 나타내는 상태로 재설정해야 합니다(브라우저가 이 작업을 자동으로 수행하지 않기 때문). 브라우저에 의해 로드된 첫 번째 페이지에는 상태가 없으므로 Aniu가 브라우저에 의해 로드된 첫 번째 페이지로 "뒤로" 돌아갈 때 event.state 값은 null입니다.

현재 기록 상태를 업데이트하려면 replacementState()를 호출하면 됩니다. 전달된 매개변수는 pushState() 메서드의 처음 두 매개변수와 동일합니다. replacementState()를 호출하면 기록 상태 스택에 새 상태가 생성되지 않고 현재 상태만 덮어쓰게 됩니다. 작은 예는 다음과 같습니다

　JavaScript 코드

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

HTML5의 기록 상태 관리 메커니즘을 사용할 때, pushState()에 의해 생성된 모든 "가짜" URL에는 웹 서버에 해당하는 실제 URL이 있는지 확인해야 합니다. 그렇지 않으면 독립 실행형 "새로 고침" 버튼을 사용하면 404 오류가 발생합니다.

HTML5 기록 상태 관리를 지원하는 브라우저에는 Chrome, Safari 5+, Firefox 4+ 및 Opera 11.5+가 포함됩니다. Safari 및 Chrome에서 pushState() 또는 replacementState()에 전달된 상태 객체는 DOM 요소를 포함할 수 없습니다. Firefox는 상태 객체에 DOM 요소를 포함하는 것을 지원합니다. Opera는 또한 현재 상태에 대한 상태 객체를 반환하는 History.state 속성을 지원합니다. 다음은 작은 예를 살펴보는 시간입니다. 작은 예를 결합해야만 HTML5의 이력 관리를 더 잘 이해할 수 있습니다.

　href 값을 추가하여 이력 관리 구현

　HTML 코드

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

　JavaScript 코드

//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;
	
	}
	
};

HTML5의 전달된 History 객체는 기록 관리

　HTML 코드

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

　를 구현합니다. JavaScript 코드

//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;i
로그인 후 복사

위는 HTML5 실제 전투 및 히스토리 관리(히스토리 객체) 분석 내용입니다. PHP 중국어 웹사이트(www.php.cn)에 주목하세요!