JavaScript（jQuery）でhtmlをインクルード

2014/7/1 HTML, JavaScript

JavaScript（jQuery）を使って外部に設置したhtmlファイルをインクルードさせるサンプルです。

ヘッダーやフッターなどの共通パーツを外部ファイル化することで、メンテナンス性が高くなります。
反面、JavaScriptで動的に生成するため、Googleのクローラーは認識しませんので、その対策が必要になります。
個人的には、とりあえずウェブマスターツールでサイトマップxmlを送信しとけば最低限は何とかなるかなって感じです。責任は持てませんけど。。

※このサンプルはjQueryと jquery.cookie が必須になりますので、以下からダウンロードするか、CDNを読み込むなりしてください。

本家jQuery
GitHub（https://github.com/carhartl/jquery-cookie）

HTML

ベースとなるhtml

<!DOCTYPE html>
<html lang="ja-jp">
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $.ajaxSetup({cache:false});
    $("div.include").load("Include-File-Name.html");
});
-->
</script>
</head>
<body>
<div class="include"></div>
</body>
</html>

インクルード用html

<div>
<p>この部分は外部からインクルードされたhtmlファイルです。</p>
<p>この部分は外部からインクルードされたhtmlファイルです。</p>
<p>この部分は外部からインクルードされたhtmlファイルです。</p>
<p>この部分は外部からインクルードされたhtmlファイルです。</p>
<p>この部分は外部からインクルードされたhtmlファイルです。</p>
<p>ソースを見て確認してみてくださいませ。</p>
</div>

JavaScript

※head内に記述しているものと同じです。

<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">
<!--
$(function(){
    $.ajaxSetup({cache:false});
    $("div.include").load("Include-File-Name.html");
});
-->
</script>

※ $.ajaxSetup({cache:false}); としているのは、インクルード用ファイルを更新した際に、即座にブラウザに反映させるためです。