JavaScript プログラミング講座

 

ヒストリーについて

 


■ヒストリーについて

 
ヒストリーは、セッション履歴を制御する機能がまとまっています。
 
■ History オブジェクトを取得する
 
window.history プロパティを使用します。
 
ヒストリーオブジェクトを取得する

// ヒストリーオブジェクトを取得する
var history_obj = window.history;

// 出力テスト
console.log(history_obj);
 
■セキュリティについて
 
作成側から、開いた先のウィンドウのセッション履歴を制御する場合、生成元(オリジン)が一致している必要があります。
 
「自身のウィンドウ」のセッション履歴を制御する場合、「作成主」とオリジンが一致している必要はありません。
 

■ HTML5 世代の API について

 
 
Internet Explorer 9 以前では対応していません。
 
■ HTML5 世代の新機能について
 
新しいセッション履歴を、自由に追加できます。
 
新しい URL アドレスへの遷移は発生しません。
 
ページ全体の再読み込みは発生せず、DOM 構造も一切変化しません。
 
これにより、シームレスなコンテンツを作成できるようになります。
 
HTML5 に対応していない過去の世代でも、「フラグメント識別子」付きの URL アドレスを駆使すれば、実現できます。
 
■リドゥ・アンドゥ UI として活用する
 
同一アドレス内にて、セッション履歴を追加する事もできます。
 
ゲームや、Web アプリなどでも活用できるでしょう。
 


 

ヒストリーのプロパティについて

 


■ヒストリーのプロパティ一覧

 
History インターフェースで利用可能な、プロパティの一覧です。
 
プロパティ名説明
lengthNumberセッション履歴の総数を取得する。
stateObject現在のページのセッション履歴のステートを取得する。(HTML5世代)
 


 

セッション履歴内の任意のページに移動する

 
 
 


■1つ前のページに戻る

 
history.back() メソッドを使用します。
 
History.back( ) :Void
引数 Voidなし
戻り値 Voidなし
 
前のページに戻る(自身のウィンドウ)

// 1つ前のページに戻る
history.back();
 

■1つ次のページに進む

 
history.forward() メソッドを使用します。
 
History.forward( ) :Void
引数 Voidなし
戻り値 Voidなし
 
1つ次のページに進む(自身のウィンドウ)

// 1つ次のページに進む
history.forward();
 

■セッション履歴内の任意のページに移動する(相対指定)

 
history.go() メソッドを使用します。
 
引数に相対位置を指定します。
 
History.go( 相対位置 ) :Void
第01引数(略可)Number進戻したい相対的なページ数を指定する。正数で進む。負数で戻る。0 で現在のページをリロード。省略した場合 0。
戻り値 Voidなし
 
■セッション履歴の位置について
 
セッション履歴の総数を取得するには、length プロパティを使用します。
 
セッション履歴の現在の位置を取得する方法はありません。
 
■使用例
 
2つ次のページに進む(自身のウィンドウ)

// 2つ次のページに進む
history.go(2);
 
1つ前のページに戻る(自身のウィンドウ)

// 1つ前のページに戻る
history.go(-1);
 


 

新しいセッション履歴を作成する(HTML5世代)

 


■「新しいセッション履歴を1つ作成する」+「新しいアドレスに遷移する」

 
pushState() メソッドを使用します。
 
このメソッドを呼び出しても、現在の DOM 構造は一切変化しません。
 
変化するのは、「セッション履歴」や「現在の URL」だけです。
 
History.pushState( ステート情報 , "タイトル" , "URLアドレス" ) :Void
第01引数 Object新しいページ用のステート情報を指定する。参照データはすべてコピーされる。
第02引数 Stringタイトル情報を指定する。
第03引数(略可)StringURL アドレス情報を指定する。
戻り値 Voidなし
 
■コンテンツの更新について
 
新しいアドレスへの HTTP 通信は発生しません。
 
コンテンツを更新したい場合、JavaScript から手動的にリソースを読み込み、手動的に DOM を更新する必要があります。
 
セッション履歴が操作された場合も、同様の処理が必要となります。
 
■第01引数(ステート情報)
 
ページを復元するために必要な情報を指定します。
 
セッション履歴の進戻操作を行うと、onpopstate イベントが発行されます。
 
ここで指定するステート情報は、「新しいページ」用です。
 
「現在のページ」用ではない事に注意して下さい。
 
■「現在のページ」用のステート情報も更新したい場合
 
先に replaceState() メソッドを使用します。
 
第03引数は、省略します。
 
続けて、pushState() メソッドを実行します。
 
■第02引数(タイトル)
 
新しいページのタイトル用の文字列を指定します。
 
大抵のブラウザが未対応です。
 
■第03引数(URLアドレス)
 
新しいページの URL アドレスを指定します。
 
遷移が不要な場合、省略します。
 
■第03引数のセキュリティについて
 
現在のアドレスと、生成元(オリジン)が一致している必要があります。
 
ローカル環境では動作しません
 
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
 
■使用例
 
マウスボタンをクリックするたびに、新しいセッション履歴を作成する

// ヒストリーが HTML5 世代の API に対応している
if(history.pushState){

	// ------------------------------------------------------------
	// マウスボタンをクリックすると実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (e){

		// ステート情報
		var state = { test:0 };

		// タイトル
		var title = "";

		// テスト用のアドレス
		var url = "#TEST_URL_" + Math.floor(Math.random() * 0xFFFFFFFF);

		// 新しいセッション履歴を1つ作成して、新しいアドレスに遷移する
		history.pushState(state , title , url);

	};

}
 


 

現在のセッション履歴を上書きする(HTML5世代)

 


■「現在のセッション履歴を上書きする」+「新しいアドレスに遷移する」

 
replaceState() メソッドを使用します。
 
このメソッドを呼び出しても、現在の DOM 構造は一切変化しません。
 
変化するのは、「セッション履歴」や「現在の URL」だけです。
 
History.replaceState( ステート情報 , "タイトル" , "URLアドレス" ) :Void
第01引数 Objectステート情報を指定する。参照データはすべてコピーされる。
第02引数 Stringタイトル情報を指定する。
第03引数(略可)StringURL アドレス情報を指定する。
戻り値 Voidなし
 
■「現在のページ」用のステート情報のみを更新する場合
 
第01引数に、「現在のページ」用のステート情報を指定します。
 
第03引数は、省略します。
 
■コンテンツの更新について
 
新しいアドレスへの HTTP 通信は発生しません。
 
コンテンツを更新したい場合、JavaScript から手動的にリソースを読み込み、手動的に DOM を更新する必要があります。
 
■第01引数(ステート情報)
 
ページを復元するために必要な情報を指定します。
 
セッション履歴の進戻操作を行うと、onpopstate イベントが発行されます。
 
■第02引数(タイトル)
 
新しいページのタイトル用の文字列を指定します。
 
大抵のブラウザが未対応です。
 
■第03引数(URLアドレス)
 
新しいページの URL アドレスを指定します。
 
ステート情報だけ書き込みたい場合は、省略します。
 
■第03引数のセキュリティについて
 
現在のアドレスと、生成元(オリジン)が一致している必要があります。
 
ローカル環境では動作しません
 
動作確認を行う場合、サーバーにアップロードしてから閲覧する必要があります。
 
■第03引数を指定した場合
 
遷移後に元のページに戻ることはできません。
 
今まで開いていたページのセッション履歴(1回分)は、第03引数のアドレスで上書きされ、消滅します。
 
一般的な遷移を行う場合、pushState() メソッドの方を使用します。
 
■使用例
 
マウスボタンをクリックするたびに、現在のセッション履歴を上書きし、新しいアドレスに遷移する

// ヒストリーが HTML5 世代の API に対応している
if(history.replaceState){

	// ------------------------------------------------------------
	// マウスボタンをクリックすると実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (e){

		// ステート情報
		var state = { test:0 };

		// タイトル
		var title = "";

		// テスト用のアドレス
		var url = "#TEST_URL_" + Math.floor(Math.random() * 0xFFFFFFFF);

		// 現在のセッション履歴を上書きして、新しいアドレスに遷移する
		history.replaceState(state , title , url);

	};

}
 


 

セッション履歴の進戻操作が発生したか調べる

 
 


■セッション履歴の進戻操作が発生したか監視する(HTML5世代)

 
onpopstate イベントを使用します。
 
このイベントは、ページの遷移が完了した直後に発行されます。
 
■イベントからステート情報を取得する
 
登録したコールバック関数の引数から、PopStateEvent オブジェクトが得られます。
 
state プロパティから、ステート情報が得られます。
 
■ステート情報を使って復元する場合の注意点
 
セッション履歴の進戻操作を、事前に知る方法はありません。
 
例えば、スクロールバーの位置などを復元したいからといって、replaceState() メソッドを頻繁に実行すべきではありません。
 
ブラウザによっては描画が大きく乱れたり、再読み込みボタンが激しく点滅してしまいます。
 
■ステートに残す情報について
 
ステートに残す情報は、インデックス値のみで十分です。
 
復元に必要な詳細情報は、別途、配列やウェブストレージに残せます。
 
■使用例
 
マウスボタンをクリックするたびに、新しいセッション履歴を作成する

// セッション履歴の位置
var history_pos = 0;

// ヒストリーが HTML5 世代の API に対応している
if(history.pushState){

	// ------------------------------------------------------------
	// ステート情報の初期値をセット(開始時のステート情報は null なので書き込み更新する)
	// ------------------------------------------------------------
	// ステート情報
	var state = {pos:history_pos};

	// 現在のページのセッション履歴を上書きする
	history.replaceState(state , "");


	// ------------------------------------------------------------
	// マウスボタンをクリックすると実行されるイベント
	// ------------------------------------------------------------
	document.onclick = function (e){
		// セッション履歴の位置を加算
		history_pos += 1;

		// ステート情報
		var state = {pos:history_pos};

		// テスト用のアドレス
		var url = "#TEST_URL_" + history_pos;

		// 新しいセッション履歴を1つ作成して、新しいアドレスに遷移する
		history.pushState(state , "" , url);

		// 出力テスト
		console.log("新しいセッション履歴を作成した URL:" + location.href);
		console.log(history.state);
	};

	// ------------------------------------------------------------
	// セッション履歴の進戻操作を行うと実行されるイベント
	// ------------------------------------------------------------
	window.onpopstate = function (e){
		// 復元できないので無視
		if(!e.state) return;

		// セッション履歴の位置を復元
		history_pos = e.state.pos;

		// 出力テスト
		console.log("セッション履歴の進戻操作を行った URL:" + location.href);
		console.log(e.state);
	};
}
 

■ URL アドレスのハッシュ部分(フラグメント識別子)が変化したか監視する

 
onhashchange メソッドを使用します。
 
Internet Explorer 7 以前では、対応していません。
 
■イベントから URL アドレス情報を取得する
 
登録したコールバック関数の引数から、HashChangeEvent オブジェクトが得られます。
 
oldURL プロパティから、変化前の URL アドレスが得られます。
 
newURL プロパティから、変化後の URL アドレスが得られます。
 
■使用例
 
マウスボタンをクリックして、onhashchange イベントの動作を確認する

var pos = 0;

// ------------------------------------------------------------
// マウスボタンをクリックすると実行されるイベント
// ------------------------------------------------------------
document.onclick = function (e){

	// テスト用のアドレス
	var url = "#TEST_URL_" + pos;
	pos += 1;

	// 新しいアドレスに遷移する
	location.assign(url);
};

// ------------------------------------------------------------
// URL アドレスのハッシュ部分が変化すると実行されるイベント
// ------------------------------------------------------------
window.onhashchange = function (e){
	// 出力テスト
	console.log("old:" + e.oldURL);
	console.log("new:" + e.newURL);
};