Tatsächlicher HTML5-Kampf und Analyse des Verlaufsmanagements (Verlaufsobjekt)

HTML5 hat die Verwaltung des Verlaufs neu hinzugefügt und das Verlaufsobjekt aktualisiert, um die Verwaltung des Verlaufsstatus komfortabler zu gestalten. In modernen Webanwendungen können Benutzer über die Schaltflächen „Vorwärts“ und „Zurück“ zwischen den Verlaufsseiten wechseln. Dadurch können einige neue Seiten, die nicht auf neuen Seiten geöffnet werden, frei vorwärts und rückwärts verschoben werden, was die Benutzererfahrung verbessert.

Durch das haschange-Ereignis können Sie erkennen, wann sich die Parameter der URL geändert haben, d. h. wann Sie reagieren müssen. Über die Statusverwaltungs-API kann die Browser-URL geändert werden, ohne eine neue Seite laden zu müssen. Sie müssen also die Methode „history.pushState()“ verwenden. Die Methode „history.pushState()“ empfängt drei Parameter: 1. Zu speichernder Inhalt 2. Titel (normalerweise ein leerer String) 3. Adresse (optional). Ein kleines Beispiel ist wie folgt

　JavaScript-Code

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

Ausgeführter Verlauf Nach der .pushState()-Methode werden die neuen Statusinformationen zum historischen Statusstapel hinzugefügt und die Adressleiste des Browsers wird zur neuen relativen URL. Der Browser sendet jedoch keine Anfrage an den Server. Auch wenn die neue location.href nach einer Änderung des historischen Status überprüft wird, wird dieselbe Adresse wie in der Adressleiste zurückgegeben. Darüber hinaus wird der zweite Parameter derzeit nicht von Browsern implementiert, sodass Sie einfach eine leere Zeichenfolge oder einen kurzen Titel übergeben können. Der erste Parameter sollte so viele Informationen wie möglich bereitstellen, um den Seitenstatus zu initialisieren.

Da die Methode „history.pushState()“ einen neuen historischen Zustand erstellt, können Sie auch die Schaltfläche „Zurück“ verwenden. Durch Drücken der Schaltfläche „Zurück“ wird das Popstate-Ereignis des Fensterobjekts ausgelöst. Das Ereignisobjekt des Popstate-Ereignisses verfügt über ein Statusattribut, das das Statusobjekt enthält, das ursprünglich als erster Parameter an pushState() übergeben wurde. Ein kleines Beispiel ist wie folgt

　JavaScript-Code

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

Verstanden: Nachdem Sie das Statusobjekt erstellt haben, müssen Sie die Seite auf den Status zurücksetzen, der durch die Daten im Statusobjekt dargestellt wird (da der Browser dies nicht automatisch für Sie erledigt). Denken Sie daran, dass die erste vom Browser geladene Seite keinen Status hat. Wenn Aniu also mit „zurück“ zur ersten vom Browser geladenen Seite zurückkehrt, ist der Wert von event.state null.

Um den aktuellen historischen Status zu aktualisieren, können Sie replaceState() aufrufen. Die übergebenen Parameter sind die gleichen wie die ersten beiden Parameter der pushState()-Methode. Durch den Aufruf von replaceState() wird kein neuer Status im historischen Statusstapel erstellt, sondern nur der aktuelle Status überschrieben. Ein kleines Beispiel ist wie folgt

　JavaScript-Code

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

Bei Verwendung des historischen Zustandsverwaltungsmechanismus von HTML5 , müssen Sie sicherstellen, dass jede mit pushState() erstellte „gefälschte“ URL eine echte, tatsächliche URL auf dem Webserver hat. Andernfalls führt die eigenständige Schaltfläche „Aktualisieren“ zu einem 404-Fehler.

Zu den Browsern, die die Verwaltung des HTML5-Verlaufsstatus unterstützen, gehören Chrome, Safari 5+, Firefox 4+ und Opera 11.5+. In Safari und Chrome darf das an pushState() oder replaceState() übergebene Statusobjekt keine DOM-Elemente enthalten. Firefox unterstützt das Einbinden von DOM-Elementen in Zustandsobjekte. Opera unterstützt auch eine Eigenschaft „history.state“, die ein Statusobjekt für den aktuellen Status zurückgibt. Im Folgenden ist Zeit für kleine Beispiele. Nur durch die Kombination kleiner Beispiele können wir die Verlaufsverwaltung in HTML5 besser verstehen.

　Href-Wert hinzufügen, um das Verlaufsmanagement zu realisieren

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

　 Verlaufsverwaltung durch das Verlaufsobjekt in HTML5

　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;i
Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse des Verlaufsmanagements (Verlaufsobjekt). , mehr Verwandte Bitte beachten Sie den Inhalt der chinesischen PHP-Website (www.php.cn)!