Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」: 小粋空間

ナビゲーションをスキップする

Top ＞ JavaScript ＞ jQuery ＞プラグイン＞ Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」

Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」

Posted at February 20,2015 1:55 AM
Tag：[Ajax, jQuery, Plugin]

Ajaxのページ遷移でURLが変更できるjQueryプラグイン「PJAX」の紹介です。

１．はじめに

jQuery.ajax()を使ってウェブページのコンテンツを入れ替えた場合、ブラウザのURLは変更されません。

が、本エントリーで紹介する「PJAX」を利用すれば、コンテンツを入れ替えと同時にURLの変更を行うことができます。

PJAX
pjax

「PJAX」とは「pushState」と「Ajax」を組み合わせた機能をもつjQueryプラグインです。

URLの変更は「History API」というHTML5の機能を使って実現しています。

「pushState」は、History APIで履歴を追加するメソッドを指します。

２．プラグインのダウンロード

PJAXのダウンロードページにアクセスし、最新版のjquery.pjax.jsまたはjquery.pjax.min.jsをダウンロードします。

３．サンプル

次の3つのHTMLを用意します。

index.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>aaa</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.pjax.js"></script>
<script>
$(function(){
    $.pjax({
        area : '#content',
        link : 'a:not([target])'
    });
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="index.html">page1</a></li>
<li><a href="index2.html">page2</a></li>
<li><a href="index3.html">page3</a></li>
</ul>
<div id="content">
ページ1
</div>
</body>
</html>

index2.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>bbb</title>
</head>
<body>
<div id="content">
ページ2
</div>
</body>
</html>

index3.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>ccc</title>
</head>
<body>
<div id="content">
ページ3
</div>
</body>
</html>

これでindex.htmlに表示されたリンクをクリックすると、ページが切り替わります。

ブラウザのソースの表示では切り替わったページのソースが表示されますが、開発ツール等でHTMLを表示すれば指定したセレクタ部分のみが切り替わっていることが分かります。

動作は下記の動画でご覧ください。

４．基本

サンプルをもとに、基本的な設定方法を解説します。

まず、pjaxで切り替えたいリンクにclass="pjax"を追加します。サンプルではナビゲーションのa要素が対象となります。

<ul>
<li><a class="pjax" href="index.html">page1</a></li>
<li><a class="pjax" href="index2.html">page2</a></li>
<li><a class="pjax" href="index3.html">page3</a></li>
</ul>

この設定は必須ではありませんが、ページ内でpjax切り替えをしたいリンクとそうでないリンクが混在することを想定し、この設定を行っています。

次にpjaxで切り替えたいコンテンツにid属性を設定します。サンプルでは「id="content"」が該当します。

<div id="content">
ページ1
</div>

そしてスクリプト部分は次をように設定します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.pjax.js"></script>
<script>
$(function(){
    $.pjax({
        area : '#content',
        link : 'a.pjax'
    });
});
</script>

$.pjax()に設定するパラメータの意味は次のとおりです（省略可）。

area：pjaxで切り替えたい要素をセレクタで指定。デフォルトは"body"です。
link：pjax対象のリンクをセレクタで指定。デフォルトは"a:not([target])"です。

あとは、1ページ目と同じHTMLマークアップかつコンテンツ部分のみ異なる内容を設定したページ（index2.htmlなど）を用意します。

サンプルのindex2.htmlやindex3.htmlはマークアップを省略していますが、ページ遷移後にリロードすると必要なHTMLマークアップがなくなるため、index.htmlと同じマークアップにする必要があります。

５．複数のエリアを更新する

複数のエリアを更新するには、areaパラメータに複数のセレクタを次のように設定します。

<pre><code>$(function(){
    $.pjax({
        area : '#content1, #content2',
        link : 'a.pjax'
    });
});</code></pre>

これで「id="content1"」のエリアと「id="content2"」のエリアを同時に更新できます。

注意点は必ず1セットのクォートで複数のセレクタを括ることです。

それぞれのセレクタをクォートで括ってカンマで区切ると、次項のフォールバックになってしまいます。

６．フォールバック

指定したセレクタが存在しない場合、areaパラメータにフォールバック用のセレクタを設定します。

<pre><code>$(function(){
    $.pjax({
        area : '#content1, #content2', '#content' , 'body',
        link : 'a.pjax'
    });
});</code></pre>

上記の例は「id="content1"」または「id="content2"」がみつからなかった場合、「id="content"」でフォールバックします。

さらに「id="content"」がみつからない場合、body要素でフォールバックします。

以上です。

PJAXには上記以外にも多くの機能が用意されているので色々試してみるとよいでしょう。

Posted by yujiro このページの先頭に戻る

小粋空間 - a cheap joke and a play on words site