pjaxを使ってみる

ページ遷移時にコンテンツを動的に書き換えることのできる「pjax」というプラグインを試してみたいと思います。

pjaxについて

pjaxは「ajax」と「pushState」を組み合わせたもので、ページ遷移をしないで動的にコンテンツを書き換える + ブラウザの履歴とURLの変更も行えるプラグインです。

pjaxを使うことで、以下のようなことができます。

• 必要な要素のみの取得になるので、ページ遷移の高速化が図れる
• ajaxのみではできなかったブラウザの「戻る」「進む」ボタンの対応ができる
• ページの遷移が実際には行われないので、サイト全体でBGMを使いたい場合、ページを切り替えても音が途切れない

pushStateの対応がIE10からになるので、pjaxはIE9以下では対応していません。
ただし、対応していないといってもpjaxを使ったページ遷移が行われないというだけで、通常のページ遷移は行えます。
なので、IE9以下の対応もきちんと想定していればそれほど問題はないと思います。

pjaxのプラグインは2種類？あるようですが、今回は以下のプラグインを使用します
PJAX
　

使い方

下記からダウンロードできます。
Releases · falsandtru/jquery-pjax · GitHub

ダウンロード後、必要なファイルの読み込み。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./jquery.pjax.min.js"></script>

HTML

	<nav id="gnav">
		<ul>
			<li><a href="index.html" class="pjax">ナビ1</a></li>
			<li><a href="index2.html" class="pjax">ナビ2</a></li>
			<li><a href="index3.html" class="pjax">ナビ3</a></li>
		</ul>
	</nav>

	<div id="contents">
		～コンテンツ内容～
	</div>

aに.pjaxが付いているものがpjaxの対象になるように設定します。
書き換える要素は#contentsの中身です。

JavaScript

$(function() {
	$.pjax({
		area: '#contents', // 書き換える要素
		link: 'a.pjax' // pjax対象のリンク
	});
});

pjaxのデモページ
デモページでは、各ページで何らかのjsの処理があると想定して、サンプル作成しています。
　

オプション

オプションに関してはドキュメントが日本語でありますので、詳しくは下記を参照ください。
API | PJAX
　

【参考サイト】

• PJAX
• pjaxを使ったSEOにも考慮した非同期通信 ｜ 株式会社マグネッツ：福岡市博多区のホームページ制作会社
• jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)