HTML5の実戦と履歴管理（履歴オブジェクト）の解析

HTML5では新たに履歴の管理が追加され、履歴オブジェクトが更新され、履歴ステータスの管理がより便利になりました。最新の Web アプリケーションでは、ユーザーは「進む」ボタンと「戻る」ボタンを使用して履歴ページを切り替えることができます。これにより、新しいページで開かれていない一部の新しいページを自由に前後に移動できるようになり、ユーザー エクスペリエンスが向上します。

haschange イベントを通じて、URL のパラメータがいつ変更されたか、つまり、いつ反応すべきかを知ることができます。状態管理 API を使用すると、新しいページを読み込まずにブラウザの URL を変更できます。したがって、history.pushState() メソッドを使用する必要があります。 History.pushState() メソッドは 3 つのパラメータを受け取ります: 1. 保存するコンテンツ 2. タイトル (通常は空の文字列) 3. アドレス (オプション)。小さな例は次のとおりです

JavaScriptコード

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

history.pushState()メソッドを実行すると、新しいステータス情報が履歴ステータススタックとブラウザのアドレスバーに追加されますも新しい相対 URL に変更されます。ただし、履歴ステータスが変更された後に新しい location.href がチェックされても、ブラウザはサーバーにリクエストを送信しません。アドレス バーと同じアドレスが返されます。さらに、現在ブラウザーでは 2 番目のパラメーターが実装されていないため、空の文字列または短いタイトルを渡すだけで済みます。最初のパラメータは、ページ状態を初期化するためにできる限り多くの情報を提供する必要があります。

history.pushState() メソッドは新しい履歴状態を作成するため、「戻る」ボタンも使用できることがわかります。 「戻る」ボタンを押すと、ウィンドウ オブジェクトの Popstate イベントがトリガーされます。 Popstate イベントのイベント オブジェクトには state プロパティがあり、最初に最初のパラメーターとして PushState() に渡された状態オブジェクトが含まれます。小さな例は次のとおりです

JavaScriptコード

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

この状態のオブジェクトを取得した後、状態オブジェクト内のデータで表される状態にページをリセットする必要があります（ブラウザーがこれらを行うと自動的に実行されるわけではありません)。ブラウザーによってロードされた最初のページには状態がないことに注意してください。そのため、Aniu が「戻って」ブラウザーによってロードされた最初のページに戻ると、event.state 値は null になります。

現在の履歴状態を更新するには、replaceState() を呼び出すことができます。渡されるパラメーターは、pushState() メソッドの最初の 2 つのパラメーターと同じです。 replaceState() を呼び出しても、履歴状態スタックに新しい状態は作成されず、現在の状態が上書きされるだけです。小さな例は次のとおりです

JavaScriptコード

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

HTML5の履歴状態管理メカニズムを使用する場合、pushState()を使用して作成されたすべての「偽の」URLが、実際の既存の URL に対応する Web サーバー。そうしないと、スタンドアロンの「更新」ボタンを使用すると 404 エラーが発生します。

HTML5 履歴状態管理をサポートするブラウザには、Chrome、Safari 5 以降、Firefox 4 以降、Opera 11.5 以降が含まれます。 Safari および Chrome では、pushState() または replaceState() に渡される状態オブジェクトに 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

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) に注目してください。