jQueryでWEBサイトの共通部分をインクルードする方法(相対パスVer.もアリ)

2016/1/27 2016/2/24 JS/jQuery

数十ページ以上の中・大規模ページ制作の場合headerやfooterなどの共通部分はPHPやSSIでのインクルードで対応していると思いますが、サーバーの環境や、案件によってJSだけで対応する場合もあります。

そんな際に使うjQueryで共通部分のソースを読み込むサンプルソースを作成しました。
共通化する場合hrefはrootパス指定がメジャーですが、相対パスでも指定出来るソースも準備しています。

ディレクトリ構造は下記の様になっていてpartsディレクトリに共通化ファイルを入れています。

Rootパス バージョン

まずはheader、footerを読み込んだ下記DEMOをご確認ください。

DEMO1

header.html

<div class="inr">
	<div id="logo"><img src="/test/ic_root/images/logo.png" alt=""></div>
	<ul id="navi" class="clearfix">
		<li><a href="/test/ic_root/">Menu</a></li>
		<li><a href="/test/ic_root/">Menu</a></li>
		<li><a href="/test/ic_root/">Menu</a></li>
		<li><a href="/test/ic_root/">Menu</a></li>
		<li><a href="/test/ic_root/">Menu</a></li>
	</ul>
</div>

hrefやsrcは上記ソースの様に階層が変わってもリンクされる様にルートパスで設定してソース部分だけを保存します。

script.js

//ヘッダーファイルパス
//ヘッダーファイルパス
var headerhtml = '/test/ic_root/parts/header.html';
//ヘッダーの読み込み
$.ajax({
  type: 'get',
  url: headerhtml,
  dataType: 'html',
  success: function(data) {
      $("#header-area").append(data);
  }
});
//フッターファイルパス
var footerhtml = '/test/ic_root/parts/footer.html';
//フッターの読み込み
$.ajax({
  type: 'get',
  url: footerhtml,
  dataType: 'html',
  success: function(data) {
      $("#footer-area").append(data);
  }
});

変数「headerhtml」にファイルパスを指定してajaxで読み込みます。あとは$("#header-area")にappendします。非常にシンプルに読み込めましたね。

相対パス バージョン

ルートパスはシンプルでしたが、環境によっては相対にしたい場合もあると思います。そんな場合はこちらを。

DEMO2

index.html(読み込み元)

<script type="text/javascript">
	var dir = '../'
	headerInclude(dir);
	footerInclude(dir);
</script>

header.html

<div class="inr">
	<div id="logo"><img src="{$root}images/logo.png" alt=""></div>
	<ul id="navi" class="clearfix">
		<li><a href="{$root}">Menu</a></li>
		<li><a href="{$root}">Menu</a></li>
		<li><a href="{$root}">Menu</a></li>
		<li><a href="{$root}">Menu</a></li>
		<li><a href="{$root}">Menu</a></li>
	</ul>
</div>

ルートパスバージョンと違う所はscriptに階層を指定している所です。
これで相対の階層を判別します。
hrefやsrcは「{$root}」と指定します。その下層であれば「{$root}lower/」です。

script.js

//ヘッダーファイルパス
var headerhtml = 'parts/header.html';
//ヘッダーの読み込み
function headerInclude(directory){
  $.ajax({
    type: 'get',
    url: directory + headerhtml,
    dataType: 'html',
    success: function(data) {
        data = data.replace(/\{\$root\}/g, directory);
        $("#header-area").append(data);
        console.log(data)
    }
  });
}
//フッターファイルパス
var footerhtml = 'parts/footer.html';
//フッターの読み込み
function footerInclude(directory){
  $.ajax({
    type: 'get',
    url: directory + footerhtml,
    dataType: 'html',
    success: function(data) {
      console.log(data)
        data = data.replace(/\{\$root\}/g, directory);
        $("#footer-area").append(data);
    }
  });
}

先ほど指定した階層を変数「headerhtml」「footerhtml」と結合して相対パスを作ります。
hrefやsrcは指定した「{$root}」をreplaceをつかって階層の値に差し替えます。

これでどちらのバージョンにも対応出来ました。
以上になります。

enumblog