jQuery.jsを使ってhtmlを外部読み込み

htmlの作成時に各ファイルで共通している部分がありますね。
・ヘッダとか
・フッタとか
・グローバルナビとか
そんな時、どうしてますか?

1.各ファイルに同じ記述をしてますか?(変更掛かったらめんどくさいですね)
2.SSI(サーバーサイドインクルード)してますか?(できればいいけどちょっぴり敷居が高い?)
3.avascriptでdocument.writeつかってますか?(ソースが長いとめんどくさいですね)
ざっくりリストアップすると以上のような方法が考えられます。

僕も上記のどれかをケースバイケースで使ってました。

そこにもうひとつ選択肢を追加します。

jQuery.jsを使って外部のhtmlファイルをまるごとインクルードしちゃいましょう。

方法

1.何はともあれjQuery.jsをダウンロード

http://jquery.com/

2.htmlのheader要素内で読み込む

<script type=”text/javascript” src=”js/jquery.js”></script>

3.同じくheader要素内で下記のようにfunctionを設定

<script type=”text/javascript”>
<!–
$(function(){
$(“#Header”).load(“header.html”);
});
// –>
</script>

※「#Header」と「header.html」はお好きに設定してね。

4.body要素内で外部htmlを読み込みたい部分に下記のように記述

<div id=”Header”></div>

5.肝心の外部htmlファイルを作成・設置(今回のケースでは読み込まれる先のhtmlと同じ階層ですね)

これでOK。

注意したほうが良い点

web標準をウリにしている場合、上記方法をとるといわゆる「空div」でひっかかります。
中身の存在しない要素というやつですね。
その辺はご自身及び会社のレギュレーションと照らし合わせつつ、問題なければ便利に使ってください。

3個のコメントあるよ

  1. TAM テクニカルチーム | JavaScriptで外部ファイルを読み込む | Tips Note

    [...] ・sprinkle.js ・jquery.inc     ◎参考サイト jQuery.jsを使ってhtmlを外部読み込み|スグラボ [...]

  2. 呼び出す側のcharsetがShift_JISです。

    読み込まれた箇所が文字化けするのですが・・・・

  3. 呼び出す側と読み込まれる側、両方の文字コードは統一されていますか?

コメントを残してみる

コメント