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」でひっかかります。
中身の存在しない要素というやつですね。
その辺はご自身及び会社のレギュレーションと照らし合わせつつ、問題なければ便利に使ってください。
[...] ・sprinkle.js ・jquery.inc ◎参考サイト jQuery.jsを使ってhtmlを外部読み込み|スグラボ [...]
呼び出す側のcharsetがShift_JISです。
読み込まれた箇所が文字化けするのですが・・・・
呼び出す側と読み込まれる側、両方の文字コードは統一されていますか?