BLOGブログ. 業務日誌

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

2016.03.16

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で使えそうなのだが。