中途半端を極める

web関連で役に立ちそうなものを紹介いたします

javascript

【Javascript】でphpのincludeやrequireのような動作をJavascriptで実現する方法

投稿日:2014年3月7日 更新日:

サブカラムやフッターなど他のページで使いまわすような要素はincludeやrequire、SSIなどで外部ファイルを読み込んで対応している人は多いかと思われます。実際そっちの方が更新も楽ですし、ケアレスミスも少ないです。(あったとしても外部ファイル1つ直せば済みます。)

それをJavascriptで実現できる方法を見つけたので紹介いたします。

javascript

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;
  }
}

インクルード部分

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

インクルードされるファイル(a.html)

<div style="border: solid 1px #000000;">hello;</div>

■参考サイト:
静的HTMLで、インクルードを実現するためのJavaScript
http://d.hatena.ne.jp/kenpoco/20080501/1209636103
ホームページビルダー・G初心者講座 – [jQuery][Ajax]別のhtmlファイルやテキストファイルを読み込む
http://www.aimix.jp/jquery_ajax.html

特にcgi周りですと、phpが使用できないので重宝します。
うまく説明ができませんが、php includeではセッション切れをおこして動作しなかったものをこちらのJavascriptにするとうまく動作してくれました。

ただ動作しないブラウザなどもあるらしいので、導入する時は入念なチェックが必要ですね。

-javascript

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

関連記事

ヘッダ固定時のページ内リンクのずれを解消する方法

position:fixedを使ってヘッダを固定した場合、ページ内リンクの位置がヘッダの高さ分ずれてしまいます。どのように調整すればいいか紹介いたします。

【javascript】複数の画像をウィンドウ幅に合わせてカルーセル風に実装(bxslider編)

ウィンドウ幅いっぱいにスライドを表示させたい。 そう思ってもなかなか思うような動作をするjavascriptを見つけるのが困難です。 見つけたとしても、それがレスポンシブに対応するのか否か。 そんなこ …

【javascript】レスポンシブデザインにも使用できる!マウスオーバーするとメインの画像が切り替わるjQuery「ImageNavigation」

今回はマウスオーバするとメインの画像が切り替わるjavascriptを紹介いたします。 FLASHなどではこのような動きをするものはあるのですが、jQueryではなかなかありそうでない動きですので、重 …

jQueryを使ってボックス要素をランダムに表示する方法

一部の要素をランダムに表示させたいという要望があったので、調べてみたところ、よさそうなjavascriptがあったので紹介いたします。結構手軽だったので活用できるシーンは多いのではないでしょうか。

【javascript】SWFObjectで配置したFlash下に、ドロップダウンメニューが隠れてしまう

jquery.droppy.jsなどのドロップダウンメニュー(プルダウンメニュー)の下にFlashを配置すると、プルダウンメニューがFlashの裏側に表示されてしまう。CSSでFlashコンテンツにz …