ホームページ制作/SEO対策なら株式会社サイバーブレーンへ

 03-5961-5681 平日10:00~19:00

 2017-11-02

pjaxで書き換え先のページごとにcssとjavascriptを適用させる!

「pjax」は非同期通信をしながらサイトの共通部分以外のコンテンツを書き換えページ推移するため、書き換え対象以外の部分は共通パーツとなりページが推移した先の外部cssファイルやjavascriptファイルを適用させようとすると普通にやったのでは出来きません。

外部cssファイルを読み込む方法と擬似的に外部javascriptを読み込む方法を紹介します。

pjaxの記述

pjaxの設定が以下のようになっている場合

■Javascript

//pjaxの初期化
$(function(){
    $.pjax({
        area : '#content',
        link : '.pjaxLink'
    });
});

//pjaxでページ推移する前に実行される
$(document).bind('pjax:fetch', function() {
  // ここに処理を記述
});

//pjaxでページ推移した後に実行される
$(document).bind('pjax:render', function() {
  // ここに処理を記述
});

■HTML

<div id="content">
この中身がpjaxによって書き換えられる
</div>

pjaxでページごとに外部cssを適用させる

pjaxで書き換えるコンテンツごとに外部cssを用意したい場合書き換え対象の中身にページごとの外部スタイルシートへのリンクを記述しておけばpjaxで書き換えたら読み込んでくれます。

■sample1.html

//pjaxで<div id="content">の中身が書き換わるたびにcssを読み込んでくれる
<div id="content">
<link href="sample1.css"></link> ←このcssファイルが読み込まれる
</div>

■sample2.html

//pjaxで<div id="content">の中身が書き換わるたびにcssを読み込んでくれる
<div id="content">
<link href="sample2.css"></link> ←このcssファイルが読み込まれる
</div>

スタイルシートを分けて管理したい場合には便利ですが、headタグの外で読むので違和感があるかもしれません。

pjaxでページごとにインラインjavascriptを適用させる

pjaxでコンテンツを書き換えた場合その中に記述しているインラインJavascriptはpjaxオプションで以下のようにすれば実行されます。

//pjaxの初期化
$(function(){
    $.pjax({
        area : '#content',
        link : 'a:not([target])'
        load : { script: true } //書き換えたコンテンツに記載されているインラインスクリプトを実行
  });
});

pjaxでページごとに外部javascriptを適用させる

外部Javascriptをphpなどで読み込んでインラインとして展開するトリッキーな方法もあります。
外部ファイルにした方が管理しやすい場合に使えます。
下の例ではphpのrequireでjavascriptファイルを読み込んでいます、上下にタグを入れてあげればインラインとして機能します。

<div id="content">
<script>
<?php require("sample.js") ?>
</script>
</div>

pjaxは便利だがめんどくさい

pjaxは書き換える対象の以外は全て共通の部品を使いますのでページごとに外部ファイルを読み込ませるには工夫がひつようです。

~この記事の著者~

サイト制作に関するご相談はこちら

 03-5961-5681 平日10:00~19:00

メールフォーム

あなたが
サイトに
求める要素
あなたがサイトに求める0要素