BLOGブログ. 業務日誌

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で使えそうなのだが。
RELATION ARTICLE関連記事. 業務日誌
気づけば…
気づけば2年間もブログを更新していない…。
というか、自社サイトの存在自体を忘れていました。
Webの…
0
観光業におけるVR活用・動向調査
・・・という名目で、
お取引企業様へのごあいさつも兼ね、遊びに行ってきました。
相変わらずのデカさ。
…
0
フレーバー枝豆「EDAMAMY(エダマミ…
北海道清水町で「むらせ農場」を営む村瀬さんが、味付きフレーバー枝豆「EDAMAMY(エダマミー)」を商品化しました。
…
0
2016年はVR(仮想現実)元年!
巷では「2016年はVR元年だ!2016年はVR元年だ!!」と騒がれておりますが、古くからVR制作に携わる弊社としては「…
0
RELATION ARTICLE関連記事. 高瀬真悟
マイナンバーと「法人番号システムWeb-…
法人番号システムWeb-APIについて考える。
公表される法人番号は誰でも利用できるのが特徴で、Web-APIも用…
0
SwiftでピンチジェスチャーによるUI…
画像ビューワのようにUIScrollViewを使って、ピンチインでUIViewの拡大後に、ドラッグしてスクロールできるよ…
0
Swiftで子クラスからコールバックの勉…
Swiftでコールバックたくさん使うので勉強。
こんな書き方で正しいのだろうか。
//ViewControlle…
2
androidアプリで回転後のViewサ…
Google先生に尋ねてもピッタリの方法が見つからなかったのだが、皆さんどうしてるんだろう?AsyncTask使ってなん…
3