サイト制作に関するメモ書き

HOME > JavaScript > jQuery > pushStateを使って動的遷移してみる

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

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

対応ブラウザ

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

try-to-dynamic-transition-using-pushstate01

サンプルコード

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を使うデモページ

history.pushState(state, title, url); ブラウザの履歴を追加する。
state: 履歴の状態に関連する任意のオブジェクトを格納でき、popstateで参照できる。
title: 履歴のタイトルを指定。
url: 履歴のURLを指定。
window.addEventListener(‘popstate‘, function (e) {
});
ブラウザの戻る・進むボタンを押した時の処理を記述。

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP