はじめに
PHPやPerlといったサーバサイドプログラムなしで、HTMLファイルのインクルードができないかを調べていたところ、JavaScriptでHTMLファイルをインクルードして表示することができるライブラリを見つけました。
一度制作したWebサイトの更新のしやすさを向上するために、プログラムのインクルードを利用して「サイドメニュー」や「ヘッダー」をテンプレート分けしている人も多いと思います。
簡単にHTMLをインクルードする方法として、phpが利用できるサーバーであればと記述したり、SSIが利用できるのであれば と記述する方法があります。
今回、phpもSSIも利用できないサーバーでサイトのパーツをテンプレート化できたらなぁ・・といろいろ探していたらついに発見！
Javascriptを利用してHTMLのインクルードを実現している方法があったのでご紹介。
JavaScriptでHTMLファイルをインクルードする
1.はじめに以下のjsファイルをダウンロードします。
2.対象のHTMLでjQueryとajaxcodedisplay-or.jsをインクルードします。
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load('jquery', '1.4.2')</script>
<script type="text/javascript" src="ajaxcodedisplay-or.js"></script>3.以下のように、aタグでインクルードするhtmlを指定します。class属性には、codeexampleを指定します。
<a href="hoge.html" class="codeexample"></a>
サンプルコード(インクルードする側)
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Displaying source code with Ajax</title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery', '1.4.2')</script> <script type="text/javascript" src="ajaxcodedisplay-or.js"></script> </head> <body> <h1>メインページ</h1> <a href="hoge.html" class="codeexample"></a> </body> </html>
サンプルコード(インクルードされる側)
<h2 style="background-color:green">インクルードしたページ</h2> <ul> <li>a</li> <li>b</li> </ul>
実行結果
