株式会社スタジオザンビ

スマホメニュー

ホームページ制作・ウェブアプリ制作 株式会社STUDIOザンビ 帯広/十勝/北海道

ホームページ作成・webシステム開発からデジタルコンテンツまで、付加価値の高いデザインやWEBシステムをご提供いたします。

BLOGブログ. 業務日誌

静的HTML(+JS)だけで共通ソースをincludeする

静的HTML(+JS)だけで共通ソースをincludeする

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>

<iframe>はmodule.htmlが動けば良いだけなので表示する必要がない。
サイズは1*1ピクセルでもいいし、非表示でも可。


■module.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文字以内

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

    CAPTCHA Image

    英数字5桁(変更

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