あるHTMLファイルに別のHTMLファイルを含める

2つのHTMLファイル、仮にa.htmlとb.htmlがあります。a.htmlの中には、b.html`を含めたい。

JSFではこのようなことができます。

<ui:include src="b.xhtml" />

これは、a.xhtmlファイルの中に、b.xhtmlを含めることができるということです。

これを*.htmlファイルで行うにはどうしたらいいでしょうか？

BalusC
編集された質問 24日 1月 2012 в 2:59
プログラミング
html include
24日 1月 2012 в 2:51
29 ビュー
ソリューション

私の意見では、jQueryを使った解決策がベストです。

a.html」を使用します。



    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 



     <div id="includedContent"></div>

b.html:

<p>This is my include file</p>

この方法は、私の問題をシンプルかつクリーンに解決してくれます。

jQuery .load()のドキュメントはこちらです。

SharpC
編集した答え 4日 11月 2016 в 11:03
解説 (20)

私の解決策は、上記の[lolo][1]のものと似ています。しかし、jQueryを使う代わりに、JavaScript'のdocument.writeでHTMLコードを挿入しています。

a.html:



  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

jQueryを使わない理由は、jQuery.jsのサイズが〜90kbであることと、読み込むデータ量をできるだけ少なくしたいからです。

あまり手間をかけずに適切にエスケープされたJavaScriptファイルを取得するには、以下のsedコマンドを使用します。

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

また、GithubでGistとして公開されている以下の便利なbashスクリプトを使えば、b.htmlをb.jsに変換するために必要な作業をすべて自動化することができます。 https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Greg Minshall][2]による、バックスラッシュやシングルクォートをエスケープする改良されたsedコマンドへの謝辞ですが、私のオリジナルのsedコマンドでは考慮されていませんでした。

また、テンプレートリテラルをサポートするブラウザでは、以下のようにしても動作します。

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

[1]： https://stackoverflow.com/users/1001224/lolo [2]： https://stackoverflow.com/users/1527747/greg-minshall

Chris Magnuson
編集した答え 21日 10月 2019 в 3:24
解説 (10)

別の方法として、サーバーの.htaccessファイルにアクセスできる場合は、拡張子が.htmlで終わるファイルに対してphpを解釈できるようにするシンプルなディレクティブを追加することができます。

RemoveHandler .html
AddType application/x-httpd-php .php .html

これで、シンプルなphpスクリプトを使って、次のような他のファイルをインクルードすることができます。

<?php include('b.html'); ?>
解説 (5)