BLOGブログ. 業務日誌

静的HTML（＋JS）だけで共通ソースをincludeする

2016.03.16

Takase

perlやphp、SSIも使えないサーバで編み出したローテクノロジーの結晶。
※<iframe>も使用

参考サイト：iframeの親から子、子から親の操作をする

たとえば「page_01.html」と「page_02.html」で共通のヘッダー／フッターを利用したい場合。
<iframe>だけでは共有できるエリアが限られてしまうので、javascriptでソース部分を入れ替える構造を考える。

「page_01.html」と「page_02.html」では「共通ソースの入れ物」だけ用意し、「module.html」に共通ソースを一括して書いておく。
「module.html」はjavascriptで自身に書いてある共通ソースを親の「共通ソースの入れ物」にセットする。

■page_01.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>PAGE_01</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/page.js"></script>
</head>
<body style="background-color:#ffc;">

<!-- 共通ソースエリア：header -->
<div class="module_area" id="module_area_header"></div>
<noscript>ごめん</noscript>
<!-- END/共通ソースエリア：header -->

<p>PAGE_01</p>
<p>共通ソースincludeテスト</p>

<!-- 共通ソースエリア：footer -->
<div class="module_area" id="module_area_footer"></div>
<noscript>ごめん</noscript>
<!-- END/共通ソースエリア：footer -->

<!-- モジュール読み込み -->
<div class="hide_box" style="visibility:hidden;">
  <iframe src="module.html"></iframe>
</div>
<!-- END/モジュール読み込み -->

</body>
</html>

■page_02.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>PAGE_02</title>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/page.js"></script>
</head>
<body style="background-color:#cff;">

<!-- 共通ソースエリア：header -->
<div class="module_area" id="module_area_header"></div>
<noscript>ごめん</noscript>
<!-- END/共通ソースエリア：header -->

<p>PAGE_02</p>
<p>共通ソースincludeテスト</p>

<!-- 共通ソースエリア：footer -->
<div class="module_area" id="module_area_footer"></div>
<noscript>ごめん</noscript>
<!-- END/共通ソースエリア：footer -->

<!-- モジュール読み込み -->
<div class="hide_box" style="visibility:hidden;">
  <iframe src="module.html"></iframe>
</div>
<!-- END/モジュール読み込み -->

</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,follow" />
<title>module</title>
<script src="js/jquery-1.11.2.min.js"></script>
</head>
<body>

<!-- 共通ソース：header -->
<div id="module_area_header" style="visibility:hidden;">
  <header style="background-color:#fcc;">
    <ul>
      <li><a href="page_01.html">PAGE_01</a></li>
      <li><a href="page_02.html">PAGE_02</a></li>
    </ul>
  </header>
</div>
<!-- END/共通ソース：header -->

<!-- 共通ソース：footer -->
<div id="module_area_footer" style="visibility:hidden;">
  <footer style="background-color:#ccf;">
    <p>フッター</p>
    <p><button id="btn_alert_a" style="cursor:pointer;">alert_a ※動かない</button></p>
    <p><button id="btn_alert_b" style="cursor:pointer;">alert_b ※動く</button></p>
  </footer>
</div>
<!-- END/共通ソース：footer -->

<!-- 親の共通ソースエリアにセット -->
<script>
jQuery(function(){
    $(window).ready(function(){
        //親の共通ソースエリアを探してソースをセットする
        $(".module_area",parent.document).each(function(i){
            var myid=$(this).attr("id");
            //自身に同じID名の要素があればhtmlをセット
            if($("#"+myid)[0]){
                $(this).html($("#"+myid).html());
            }
        });
        //共通ソース部分にjavascriptのイベント登録
        //親のソースセット終わってから→子が親側に用意された関数を呼ぶ
        window.parent.module_set_script();
    });
});
</script>
<!-- END/親の共通ソースエリアにセット -->

</body>
</html>

ソースを入れるだけであれば簡単だが、共通ソース部分でjavascriptのclickイベントなど登録したい場合は親側に関数を用意し、親のソースセットが終わってからイベント登録する。（module.html：46行目）
※自分で書いてて混乱する。

ためしに「page_01.html」と「page_02.html」で呼んでいる「js/page.js」には以下のように書いておく。
ボタン「alert_a」はフッターの共通ソースがセットされる前なのでイベントは登録されないはず。

■js/page.js

//通常の書き方
jQuery(function(){
    $("#btn_alert_a").click(function(){
        //動かない
        alert("alert_a!");
    });
});

//moduleが読まれてからセットする関数
function module_set_script(){
    $("#btn_alert_b").on("click",function(){
        //動く
        alert("alert_b!");
    });
}

javascriptが動くことが大前提であるので<noscript>で謝っておくのを忘れずに。

■サンプルページ
http://nzambi.com/takasewk/test_htmlmodule/page_01.html
http://nzambi.com/takasewk/test_htmlmodule/page_02.html

かなり気になるのは、構造がSEOスパムな点である。
module.htmlに「<meta name="robots" content="noindex,follow" />」を入れたり、共通ソースを入れる要素を非表示にしているが…ダメかな？
ショッピングカートサービスなど機能が限定されたCMSで使えそうなのだが。

ヒトコトどうぞ

※500文字以内

※スマートフォンなど画像認証がうまくいかない場合は、一度[変更]してからご入力ください。

※下記英数字を入力し、投稿ボタンを押してください。この数字を読み取っていただくことで自動化されたプログラムによる投稿でないことを確認させていただいております。

※コメントは承認制です。場合によっては管理者の判断により掲載されないことや、抜粋等により再構成される場合があります。

英数字5桁（変更）

コメントされていません。