デザイナーのHISADAです。今回は、PHPなどのサーバーサイドスクリプトを使わずに、jQueryだけで簡単に外部htmlの内容をインクルードする方法を解説いたします。
例としてサイト共通のヘッダーをhtmlにインクルードする方法について解説いたします。
読み込む側・読み込まれる側のhtmlを用意
header.html（読み込まれる側）
<ul id="header-inner"> <li><a>ナビ1</a></li> <li><a>ナビ2</a></li> <li><a>ナビ3</a></li> </ul>
index.html（読み込む側）
<div id="header-outer"> <!--ここにインクルード--> </div> <div> <h1>見出し</h1> <p>本文本文本文本文本文本文本文本文本文</p> </div>
※htmlの文字コードはUTF-8にしてください。
読み込む側のhtmlは、表示したい場所に任意のID(#header-outer)をつけたBOX要素を用意してください。
読み込まれる側には、読み込んでほしい内容を書きます。今回の例ではヘッダーという事でナビゲーションをリスト形式で記述しています。そして読み込んで欲しい要素に任意のID（#header-inner）をつけます。このIDをつけた部分だけが読み込まれる事になりますので、その他に何が書いてあっても特に問題ありません。
また今回の例では読み込まれる側をhtml形式にしましたが、txt形式でも問題ありません。
javascriptの書き方
HTMLの準備ができたら、次に読み込む側のHTMLにjavascriptを書いていきたいと思います。 まず、あらかじめお決まりのjQueryを読み込んでおきます。
そして今回使うのは「.load」という関数です。
$(ターゲット要素).load(URL, オブジェクト, コールバック)
「ターゲット要素」部分には、読み込む側に設置した任意のID（今回は#header-outer）を記述します。「URL」部分は読み込まれる側のhtmlのパスを書きます。 さらにURLの後にIDなどのセレクタを入れると、htmlの中の一部を指定する事ができます。（今回は/header.html #header-inner）
※URLは絶対パスで書いておくと階層が変わってもそのまま使えるのでオススメです。
第２引数（省略可）に「オブジェクト」を設定すると、サーバーにデータを送信することができますが、サーバーサイドとの連携に使いますので、今回は割愛させて頂きます。
第３引数（省略可）の「コールバック」部分はのちほど解説いたします。
$(function(){
$("#header-outer").load("/header.html #header-inner");
})
これでjavascirptの記述は終わりです。
htmlをロードするタイミングでheader.html内に#header-innerがインクルードされるようになります。
もちろん、htmlをロードするタイミング以外にクリックなどの別のイベントにも設置可能です。
最終的なHTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="/common/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#header-outer").load("/header.html #header-inner");
})
</script>
</head>
<body>
<div id="header-outer">
<!--ここにインクルード-->
</div>
<div>
<h1>見出し</h1>
<p>本文本文本文本文本文本文本文本文本文</p>
</div>
</body>
インクルードした結果
<!DOCTYPE HTML> <!--省略--> <body> <div id="header-outer"> <ul id="header-inner"> <li><a>ナビ1</a></li> <li><a>ナビ2</a></li> <li><a>ナビ3</a></li> </ul> </div> <!--省略--> </body>
インクルードしたもの対してjavascriptを適用させたい場合
さらにステップアップな内容として、インクルードしたものに対して、さらに何か別のjavascriptを適用させたい場合は、一般的なhtmlをロードするタイミングで記述しても動きません。
これはjavascriptの実行のタイミングの問題です。htmlをロードするタイミングでインクルードしたものに対してjavascriptをきかせたい場合は、第３引数のコールバック関数としてjavascriptを書く必要があります。
コールバック関数の書き方
$("#footer-inc").load("/dashboard/footer.html #footer-set", function (){
//コールバック後のjavascriptをここに記述
});
まとめ
このように意外と簡単にインクルードする事ができます。今回は共通のヘッダーという想定で使用しましたが、例えばトップページに表示している新着情報を、下層ページにも同じものを表示したい場合などは、読み込まれる側としてtop.html #newsなどと記述すれば良いという事ですね。
こんな感じで色々応用できると思いますので、一度試してみてください。
