ヒストリーについて（History）

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

// 出力テスト
console.log(history_obj);

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

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

// ２つ次のページに進む
history.go(2);

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

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

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

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

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

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

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

	};

}

// ヒストリーが 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);

	};

}

// セッション履歴の位置
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;

		// 新しいセッション履歴を１つ作成して、新しいアドレスに遷移する
		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);
	};
}

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