Help us understand the problem. What is going on with this article?

Javascriptで簡単に更新!ヘッダーやフッターなどの共通部分を簡単に更新する方法!

More than 1 year has passed since last update.

qiita01ai.jpg

cms以外のhtmlで作った静的なサイトの共通部分、ヘッダーやフッターサイドバーなどを修正するとき一部分だけ変更する場合でも全ページのソースを修正しなければならないので大変です。
そこで何か一括で変換できるような方法がないかと思い、Javascriptで一括変換できるような方法を紹介します。

別にDreamweaverのtemplate機能やPHPで作成してもいいのですが、そもそもDreamweaverだとAdobeを購入しなければ行けないし、PHPだと「〜.php」になったり、html上でphpを使えるようにする為.accessの設定をしたりとかでサーバーごとの設定があるので今回はJavascriptを選択しました。

Javascriptで共通化していこう

まず、ベースとなるHTMLにJavascriptを読み込めるようにします。

<script src="main.js"></script>

そして共通化する部分に下記を記述。

<script>header();</script>

次に読み込むJavascriptを作ります。
今回はajaxを使用した方法になります。

参考:
jQuery リファレンス jQuery.ajax

js
function header(){
    $.ajax({
        url: "header.html", // 読み込むHTMLファイル
        cache: false,
        success: function(html){
            document.write(html);
        }
    });
}

パスを指定した作りになるなら

<script>header('../');</script>
function header(rootDir){
    $.ajax({
        url: rootDir + "header.html", // 読み込むHTMLファイル
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); //header.htmlの{$root}を置換
            document.write(html);
        }
    });
}

参考:
更新するのが面倒!サイトの共通部分を簡単に作る様々な方法

共通化ファイルが複数あるならincludeフォルダを作りまとめた方がわかりやすいです。

index.html
style.css
main.js
include
 - header.html
 - footer.html
 - sidebar.html

フォルダをまとめる際はディレクトリーを気をつけてください。

function header(rootDir){
    $.ajax({
        url: rootDir + "include/header.html", // ディレクトリー変更
        cache: false,
        async: false,
        dataType: 'html',
        success: function(html){
            html = html.replace(/\{\$root\}/g, rootDir); 
            document.write(html);
        }
    });
}

リンクがある場合は「{$root}」を追加します。

<a href="{$root}index.html">TOP</a>

出力されると下記のようになります。
デメリットとしてはscript部分が余分なソースになります。

<script>header('../');</script>
<header>
    <ul>
        <li><a href="{$root}index.html">TOP</a></li>
        <li><a href="{$root}about.html">ABOUT</a></li>
        <li><a href="{$root}service.html">SERVICE</a></li>
        <li><a href="{$root}contact.html">CONTACT</a></li>
    </ul>
</header>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away