on the center line.

静的HTMLで、インクルードを実現するためのJavaScript

HTML, Javascript | 19:01

ローカルディスク上に存在する静的HTMLで、外部ファイルをインクルードするためのスクリプト（つまり、XMLHttpRequestオブジェクトの代わり）。

以前にも同じようなエントリを書いたのですが（http://d.hatena.ne.jp/kenpoco/20080228/1204198090）、いくつか不具合があったので修正してます。

• IE6,7に対応（前回はFirefox2のみ）。
• インクルードするファイルの拡張子が.HTMLと.TXTで動作が異なっていたので、その対応。
• インクルードした後で、その内容を変更するための仕組みを追加。

最近HTMLを作る機会が多いので自分で使ってみてるのですが、けっこう重宝してます。全ページに同じようなヘッダー部分がある場合なんかに、ヘッダー部分を１ファイルにまとめておけるので、その後の修正がかなり楽。

【使用例】
-----------------------
 インクルード部分
-----------------------
<div>
   <script type="text/javascript" >
      include("a.html");    ←HTML内のインクルードしたいところに記入
   </script>
</div>

-----------------------
 インクルードされるファイル（a.html）
-----------------------
<div style="border: solid 1px #000000;">hello;</div>

-----------------------
 インクルード結果（表示後にinnerHTMLで確認）
-----------------------
<div>
   <script type="text/javascript" >
   </script>
   <div style="border: solid 1px #000000;">hello;</div>  ←includeした内容が<script>タグの下のところに入る
</div>

【関数本体】
-----------------------
function include(filename, afterfunc) {

  include.seq = (include.seq)? include.seq + 1: 1;

  var id = new Date().getTime() + "-" + include.seq;
  var inc = document.createElement("iframe");

  inc.id = "inc-" + id;
  inc.src = filename;
  inc.style.display = "none";
  document.write("<span id=\"" + id + "\"></span>");
    
  var incfunc = function() {
    
    var s = (function() {
      var suffix = (n = filename.lastIndexOf(".")) >= 0 ? filename.substring(n): "default";
      if (suffix == ".html") return inc.contentWindow.document.body.innerHTML;
      if (suffix == ".txt") return inc.contentWindow.document.body.firstChild.innerHTML;
      if (suffix == "default") return inc.contentWindow.document.body.innerHTML;
    })();

    var span = document.getElementById(id);

    var insertBeforeHTML = function(htmlStr, refNode) {
      if (document.createRange) {
        var range = document.createRange();
        range.setStartBefore(refNode);
        refNode.parentNode.insertBefore(range.createContextualFragment(htmlStr), refNode);
      } else {
        refNode.insertAdjacentHTML('BeforeBegin', htmlStr);
      }
    };

    insertBeforeHTML(s.split("&gt;").join(">").split("&lt;").join("<"), span);
    document.body.removeChild(inc);
    span.parentNode.removeChild(span);
    if (afterfunc) afterfunc();
  };

  if (window.attachEvent) {
    window.attachEvent('onload', 
      function() {
        document.body.appendChild(inc); 
        inc.onreadystatechange = function() { if (this.readyState == "complete") incfunc(); };
      });
  }
  else {
    document.body.appendChild(inc);
    inc.onload = incfunc;
  }
}