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

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

たとえばヘッダー部分。
簡単にいうと、
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/