JavaScriptを使ってヘッダーやフッターなどの共通要素を呼び出す方法

うぇぶもようの中の人

9年前

サイトをつくっていると、たとえばページ共通のヘッダーやフッターに
修正が出てくると全ページ修正することになって大変…。
まあ、できなくてもなんとかはなるんですが、1回の修正で終わることができるのなら
それにこしたことはないです。

今回はJavaScriptで外部化した要素を呼び出す方法を
ご紹介します。
この方法は、ローカル環境では動作しませんのでサーバーにアップして確認していただく必要があります。

http://affiliate.ks-product.com/javascript-common-parts-external/

この方法を見つけたとき本当に「いいものみっけ！」というかんじでした。（笑）
ありがとうございます。
以下で説明する内容は上記のサイト様で紹介していた方法を、
自分で使いやすいように備忘録としてメモ。

まずは共通にしたい要素を外部化

たとえばヘッダー部分。
簡単にいうと、
headerの部分を新規HTMLとして保存。
header.htmlとかにするとわかりやすい。

<header>
    <h1><a href="./index.html">Site Name</a></h1>
    <nav>
        <ul>
            <li><a href="./about.html">About</a></li>
            <li><a href="./blog/">Blog</a></li>
            <li><a href="./page1.html">Page01</a></li>
            <li><a href="./page2.html">Page02</a></li>
            <li><a href="./contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

お次は、共通のJavaScriptを作成

次は外部化した要素を呼び出すためのJavaScriot。

JavaScriptを呼び出す

head内に記述しましょう。
ファイル名は、お好きなものでも良いです。
ファイル階層によってパスは変えてください。

<!--head要素内に記述-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="./js/common.js"></script>

呼び出されるJavaScriptファイルを作成

function writeHeader(rootDir){
    $.ajax({
        url: rootDir + "header.html", //パスはcommon.jsが読み込まれたHTMLファイルが基準
        cache: false, //キャッシュを利用するか（お好みで）
        async: false, //非同期で読み込むか（お好みで）
        success: function(html){

            html = html.replace(/\{\$root\}/g, rootDir);
            document.write(html);
        }
    });
}

共通部分を呼び出す

呼び出す側と呼び出される側の階層によってパスは変更してください。

<!-- 外部ファイルのheaderを読み込み -->
<script type="text/javascript">
    writeHeader("./");
</script>

これでまずは、ヘッダーが呼び出されました。
しかしこのままでは多階層のサイトではリンク切れがおこってしまいます。
この場合は以下のようにリンクパスを修正することで解決です。

<header>
    <h1><a href="./index.html">Site Name</a></h1>
    <nav>
        <ul>
            <li><a href="./{$root}about.html">About</a></li>
            <li><a href="./{$root}blog/">Blog</a></li>
            <li><a href="./{$root}page1.html">Page01</a></li>
            <li><a href="./{$root}page2.html">Page02</a></li>
            <li><a href="./{$root}contact.html">Contact</a></li>
        </ul>
    </nav>
</header>

なんて便利！
SEO的にも、JavaScriptで生成されたコンテンツもクローラーの進化により
解析されるようになったとのことで一安心です。
どんどん活用していきたいと思います！

現在いるページを示すためのページリンクのアクティブ化についても
説明してくれていますので、試したいかたはぜひ。

http://affiliate.ks-product.com/javascript-common-parts-external-activate/