Combat réel HTML5 et analyse de la gestion de l'historique (objet historique)

HTML5 a récemment ajouté la gestion de l'historique et mis à jour l'objet historique pour rendre plus pratique la gestion du statut historique. Dans les applications Web modernes, les utilisateurs peuvent changer de page d'historique via les boutons « suivant » et « précédent ». Cela permet à certaines nouvelles pages qui ne sont pas ouvertes dans de nouvelles pages d'avancer et de reculer librement, améliorant ainsi l'expérience utilisateur.

Grâce à l'événement haschange, vous pouvez savoir quand les paramètres de l'URL ont changé, c'est-à-dire quand vous devez réagir. Grâce à l'API de gestion d'état, l'URL du navigateur peut être modifiée sans charger une nouvelle page. Vous devez donc utiliser la méthode history.pushState(). La méthode history.pushState() reçoit trois paramètres : 1. Contenu à stocker 2. Titre (généralement une chaîne vide) 3. Adresse (facultatif). Un petit exemple est le suivant

　Code JavaScript

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

Historique exécuté Après la méthode .pushState(), les nouvelles informations d'état seront ajoutées à la pile d'état historique et la barre d'adresse du navigateur deviendra la nouvelle URL relative. Cependant, le navigateur n'envoie pas de requête au serveur, et même si le nouveau location.href est vérifié après le changement d'état historique, la même adresse que dans la barre d'adresse sera renvoyée. De plus, le deuxième paramètre n'est actuellement pas implémenté par les navigateurs, vous pouvez donc simplement transmettre une chaîne vide ou un titre court. Le premier paramètre doit fournir autant d'informations que possible pour initialiser l'état de la page.

Parce que la méthode history.pushState() créera un nouvel état historique, vous constaterez que le bouton "Retour" peut également être utilisé. Appuyer sur le bouton "Retour" déclenchera l'événement popstate de l'objet fenêtre. L'objet événement de l'événement Popstate a un attribut state, qui contient l'objet state initialement transmis à pushState() comme premier paramètre. Un petit exemple est le suivant

　Code JavaScript

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

Après avoir créé l'objet d'état, vous devez réinitialiser la page à l'état représenté par les données dans l'objet d'état (car le navigateur ne le fera pas automatiquement pour vous). N'oubliez pas que la première page chargée par le navigateur n'a pas d'état, donc lorsque "back" Aniu revient à la première page chargée par le navigateur, la valeur event.state est nulle.

Pour mettre à jour l'état historique actuel, vous pouvez appeler replaceState(). Les paramètres transmis sont les mêmes que les deux premiers paramètres de la méthode pushState(). L’appel de replaceState() ne créera pas de nouvel état dans la pile d’états historique, il écrasera uniquement l’état actuel. Un petit exemple est le suivant

　Code JavaScript

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

Lors de l'utilisation du mécanisme de gestion d'état historique de HTML5 , vous devez vous assurer que chaque "fausse" URL créée à l'aide de pushState() possède une URL réelle et réelle qui lui correspond sur le serveur Web. Sinon, le bouton « Actualiser » autonome entraînera une erreur 404.

Les navigateurs prenant en charge la gestion de l'état de l'historique HTML5 incluent Chrome, Safari 5, Firefox 4 et Opera 11.5. Dans Safari et Chrome, l'objet state passé à pushState() ou replaceState() ne peut pas contenir d'éléments DOM. Firefox prend en charge l'inclusion d'éléments DOM dans les objets d'état. Opera prend également en charge une propriété history.state, qui renvoie un objet d'état pour l'état actuel. Ce qui suit est l'heure des petits exemples. Ce n'est qu'en combinant de petits exemples que nous pourrons mieux comprendre la gestion de l'historique en HTML5.

　Ajouter de la valeur href pour réaliser la gestion de l'historique

　HTML code

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

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

　 Gestion de l'historique via l'objet historique en HTML5

　Code HTML

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

　Code 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
Ce qui précède est le contenu du combat réel HTML5 et de l'analyse de la gestion de l'historique (objet historique) , plus connexes Veuillez faire attention au site Web PHP chinois (www.php.cn) pour le contenu !