pushStateを使って動的遷移してみる

pushStateとajaxを組み合わせてページの動的遷移を試してみます。

対応ブラウザ

pushStateが対応しているブラウザはこちら。
IE10からの対応になります。

サンプルコード

HTML(ページ1)

<nav>
	<a href="index.html" class="pagelink">ページ1</a> | <a href="index2.html" class="pagelink">ページ2</a>
</nav>
<div id="contents">
	<div id="contents-inner">
		<p class="index">ページ1の中身</p>
	</div>
</div>

HTML(ページ2)

<nav>
	<a href="index.html" class="pagelink">ページ1</a> | <a href="index2.html" class="pagelink">ページ2</a>
</nav>
<div id="contents">
	<div id="contents-inner">
		<p class="index2">ページ2の中身</p>
	</div>
</div>

JavaScript

$(function() {
	// ページの動的遷移
	$(document).on('click', '.pagelink', function() {
		// pushStateに対応している場合
		if(window.history && window.history.pushState) {
			pagelinkHref = $(this).attr('href');
			window.history.pushState(null, null, pagelinkHref);
			changeContents(location.pathname);
			return false;
		}
	});

	// ブラウザの戻る・進むボタン
	window.addEventListener('popstate', function (e) {
		changeContents(location.pathname);
	});

	//コンテンツの切り替え
	function changeContents(url) {
		$('#contents').fadeOut(function() {
			$('#contents').load(url + ' #contents-inner', function() {
				$('#contents').fadeIn();
			});
		});
	}
});

pushStateを使うデモページ

【参考サイト】

• AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた | webOpixel
• pushStateでブラウザの履歴を追加する | Tips Note
• 【HTML5】HISTORY API「pushState/popState」を使って画面遷移しなくてもURLを変化させて、戻るボタンの挙動をカスタマイズする | unitopi – ユニトピ –