jQueryを使った外部のhtmlの読み込みTips

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

jQueryを使ってヘッダ、フッタなど共通部分のhtmlを本体のページに読み込むカンタンTipsです

共通で使いたいhtmlと、読み込む側のhtmlを用意する。

読み込みたい共通部分にはheadタグとかbodyタグとかは不要です。
ほんとに部分的に抜き出したhtmlだけを用意します。

例えばヘッダ、フッタを共通にする場合は3つのファイルができることになります。

index.html　本体
header.html　ヘッダー
footer.html　フッター

jQueryを使うので、htmlの文字コードはUTF-8にしておきます。

jQueryをダウンロードする

http://jquery.com/

特に理由がなければ「Production」を使用します。

htmlでjQueryを呼び出し、共通htmlを読み込む

まずjQueryを呼び出します。ふつーに。

＜script type=”text/javascript” src=”./javascripts/jquery-1.4.3.min.js”＞＜/script＞

 次に、共通htmlを組み込みたい部分にidをもった空divを挿入します。

＜div id=”header”＞＜/div＞

こんなカンジ。

headタグ内で、idと読み込むhtmlファイルとを紐づけます。

＜script type=”text/javascript”＞
  $(function(){
    $(“#header”).load(“./header.html”);
    $(“#footer”).load(“./footer.html”);
  })
＜/script＞

これでOK。

完成したhtmlはこんなカンジ

＜html＞
＜head＞

＜script type=”text/javascript” src=”./javascripts/jquery-1.4.3.min.js”＞＜/script＞

 ＜script type=”text/javascript”＞
  $(function(){
    $(“#header”).load(“./header.html”);
    $(“#footer”).load(“./footer.html”);
  })
＜/script＞

＜/head＞

＜body＞
＜div id=”header”＞＜/div＞
＜div＞
…
…
＜/div＞

＜div id=”footer”＞＜/div＞
＜/body＞

＜/html＞

ちょっとした注意点

共通htmlを読み込んだとき、階層構造は当然読み込む側のhtmlに準じることになります。
imgタグやaタグでURLを相対パス指定にすると、
階層がズレた場合デッドリンクになってしまいます。
パスはすべて絶対パスで記述するか、
相対パスを使用するならデッドリンクにならないよう階層構造に注意が必要です。