HTMLの共通部分をjqueryで読み込む

クライアントワークは、CMS案件がメインになりつつあるGORI Styleです。
ただ、まだHTMLで組む場合もあります。

ボリュームとして十数ページだとしても、
やっぱりグローバルメニューやフッターなど、共通パーツはまとめて作業したい！
と思って、今回は共通パーツをインクルードすることにしました。

複数ページで共通になる部分をインクルードするときにjqueryでコンテンツを読み込む場合

jqueryはクライアント側でHTMLの共通部分を読み込むことができます。
そのためHTMLの共通部分をPHPでインクルードするときのようにWebサーバーの環境を確認する必要はありません。
jqueryですのでjquery本体をheadで読み込んでおくことをお忘れなくです。

HTMLの複数ページで共通部分をjqueryで読み込む場合の具体的なやり方。

<header id="header"></header>
    <div class="wrapper">
        <div id="main">複数ページごとのメインコンテンツ</div>
        <div id="side"></div>
    </div>
    <footer id="footer"></footer>

//共通パーツ読み込み
$(function () {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});

複数ページごとのメインコンテンツ

まずHTMLの複数ページで共通化して表示したい要素にid属性を記述してid属性値にid名を指定します。たとえばサイトで共通のヘッダーコンテンツを表示したい場合では、header要素の開始タグにid=”header”のように指定します。
次にscript要素を</body>直上に記述します。script要素内ではfunctionで実行する処理を、共通部分を読み込む要素に指定したidと紐付けます。
最後にjqueryのloadに、共通部分に使うために作成してサーバーにアップしたHTMLファイルのパスを指定します。

という感じで、少し効率化を図ることができそうです♪

Follow me!

@goristyle