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


627

2つのHTMLファイルがあるa.htmlとしb.htmlます。ではa.html私が含まれるようにしたいですb.html

JSFでは、次のように実行できます。

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

つまり、a.xhtmlファイル内にを含めることができますb.xhtml

どうすれば*.htmlファイルでそれを行うことができますか?



32
番号!その2つの異なるもの!
lolo

関連、ただし対象localhoststackoverflow.com/questions/7542872/…–
cregox

<object type = "text / html" data = "b.xhtml"> </ object>
MarMarAba

回答:


687

私の意見では、最良のソリューションはjQueryを使用します:

a.html

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

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

b.html

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

この方法は私の問題に対するシンプルでクリーンな解決策です。

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


5
この `<script> $("#includedContent ")。load(" b.html "); </ script>だけを実行することの違いは何ですか?
Rodrigo Ruiz

10
@RodrigoRuiz $(function(){})は、ドキュメントの読み込みが完了した後にのみ実行されます。
ProfK

8
含まれているHTMLファイルにCSSが添付されていると、ページスタイルが台無しになる可能性があります。
Omar Jaafor、2015年

6
私はあなたが言った通りです。私はブートストラップを使用していて、B.htmlのcss上書きがあります。A.htmlでB.htmlを使用して、最終的にA.htmlのヘッダーとして使用すると、CSSが優先順位を失い、レイアウトが異なることがわかります。これに対する解決策はありますか?
Pavan Dittakavi

37
これにはサーバーが必要です。ローカルファイルで使用する場合:XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Basj

155

上記からloloの答えを拡張して、多くのファイルを含める必要がある場合は、ここでもう少し自動化します。

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

そして、htmlに何かを含めるには:

<div data-include="header"></div>
<div data-include="footer"></div>

これには、views / header.htmlおよびviews / footer.htmlファイルが含まれます。


非常に便利。などの別のデータパラメータを介して引数を渡しdata-argument、インクルードファイルで取得する方法はありますか?
クリス

@chris GETパラメータを使用できます。例$("#postdiv").load('posts.php?name=Test&age=25');
Nam G VU

5
小さな提案-必要ありませんclass="include"var includes = $('[data-include]');
-jQuery

ローカルファイルを使用したchromeで動作しない「クロスオリジンリクエストはプロトコルスキームでのみサポートされています:htt」
Artem Bernatskyi

2
@ArtemBernatskyi代わりにローカルサーバーを実行すると役立ちますか?ここでは簡単なチュートリアルです:developer.mozilla.org/en-US/docs/Learn/Common_questions/...は
mhanisch

146

私の解決策は、上記のloloの解決策に似ています。ただし、jQueryを使用する代わりにJavaScriptのdocument.writeを介してHTMLコードを挿入します。

a.html:

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

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

      ...

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

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にGisthubとして公開されている次の便利なbashスクリプトを使用して、必要なすべての作業を自動化し、https//gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6に変換b.htmlb.jsます

元のsedコマンドでは考慮されなかった、スラッシュと単一引用符もエスケープする改良されたsedコマンドのGreg Minshallへの謝辞。

別の方法として、テンプレートリテラルをサポートするブラウザでは、以下も機能します。

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>

`);

4
@TrevorHickeyはい、そうです、それが私のソリューションの欠点であり、それはあまりエレガントではありません。ただし、各行の末尾に単純な正規表現を使用して「\」を挿入できるため、これが私にとって最も効果的です。うーん...多分私は私の正規表現を介して挿入を行う方法を私の答えに追加する必要があります...
Tafkadasoh

2
ああ、それは醜いです-いいえ。私はむしろ自分のhtmlをhtmlとして記述します。コマンドラインでsedを使用できるかどうかは気にしません-テンプレートの内容を変更するたびにそれに依存する必要はありません。
jbyrd 16

1
@Goodra 'マークのないHTMLで動作するはずです。検索/置換を実行して置換するだけの場合` with \ `THEN検索/置換を置換'して\'、改行を「改行」で置換すると、正常に機能します。
wizzwizz4 2017年

1
@ wizzwizz4:Gregのおかげで、sedコマンドは単一引用符とバックスラッシュもエスケープします。さらに、すべての作業を実行するbashスクリプトを追加しました。:-)
タフカダソー

1
あなたは、バッククォートを使用することができます`-そして、あなたのような表現を挿入することができます${var}あなたが唯一のエスケープする必要がある- \`\$
inetphantom

85

Html5rocksチュートリアルPolymer-ProjectでHTML5インポートチェックアウトする

例えば:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

27
HTMLインポートは、ページにコンテンツを直接含めることを意図していません。この回答のコードは、親ページ内のテンプレートとしてのみstuff.html使用できるようにしますが、スクリプトを使用して親ページにDOMのクローンを作成し、ユーザーに表示されるようにする必要があります。
騒々しい2014年

1
HTMLページのコンテンツを別のHTMLページに挿入するためのhtml5rocks.comの説明は、まだ多くのブラウザーで機能していないようです。Opera 12.16とSuperbirdバージョン32.0.1700.7(233448)で試してみましたが、Xubuntu 15.04では効果がありませんでした。Firefoxでは(うまくいけばバグが修正されているので)、多くのバージョンのChromeでは機能しないと聞きました。そのため、将来的には理想的なソリューションになる可能性があるように見えますが、クロスブラウザソリューションではありません。
Brōtsyorfuzthrāx

1
2016年末現在、FireFox(45.5.1 ESR)では準備ができていないようです。JSコンソールは言います:TypeError: ... .import is undefinedMDNは、「現時点では、この機能はどのブラウザーにもネイティブに実装されていません」と述べています。この機能でFFを構築できるかどうか誰かが知っていますか?
sphakka

3
Firefoxはこれをサポートしません。有効にするには、「dom.webcomponents.enabled」を設定してみてください。更新可能なWebビューを備えたChromeとOpera、Androidでのみ機能します(starting 4.4.3)。Appleブラウザはそれをサポートしていません。これは、Webコンポーネントにとっては素晴らしいアイデアのように見えますが、まだ広く実装されていません。
Maxim

9
2018年後半の更新:何らかの理由で
V. Rubinetti

60

私が書いたライブラリの恥知らずなプラグインがこれを解決します。

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

上記はの内容を取り、それと/path/to/include.html置き換えdivます。


4
include.htmlにJavaScriptが埋め込まれている場合、JavaScriptを評価しますか?
セス

1
@そうではないようです。私はsrcをいじって、それを実行できるかどうかを確認します。michael-marrのおかげで
xandout

2
鮮やかさ!!!!あなたのものは、挿入する場所のトークンとして使用されるdivタグを置き換える唯一のソリューションのようです。後でソースを注意深く勉強します!! :-)
kpollock 2016

1
これにより、HTML / CSSは含まれますが、ソースファイルのJavaScriptは含まれません。を使用する場合はいつでも、それを再度含める必要があり<div data-include="/path/to/include.html"></div>ます。このツールを使用すると、単純なプラグインなしのマルチページモックアップをクリーンな方法で簡単に作成できます。
Vincent Tang

1
このlibを任意のアプリケーションで使用できますか?どのように著者を信用できるのですか?W3Schoolは同様のソリューション、唯一の違いがあり、それという再帰的なだけでなく、窓の負荷に呼び出し....にあなたのコードの向きw3schools.com/howto/tryit.asp?filename=tryhow_html_include_1
yeppe

43

同じフォルダにある別のファイルを含める単純なサーバー側のincludeディレクティブは、次のようになります。

<!--#include virtual="a.html" --> 

21
SSIを使用するためにサーバーを構成する必要があります
lolo

7
サーバーにSSIを設定するためのリファレンスを以下に示します。httpd.apache.org
docs / 2.4

<!--#include file="a.html" -->同様に試す価値があるかもしれません
jimmyjudas

SSIを含めると、Webサーバーが少し遅くなります(そのため、絶対に必要になるまで避けてください)。
Amit Verma、2015年

36

スクリプトは必要ありません。サーバー側で特別なことをする必要はありません(これはおそらくより良いオプションです)

<iframe src="/path/to/file.html" seamless></iframe>

古いブラウザはシームレスをサポートしていないため、CSSを追加して修正する必要があります。

iframe[seamless] {
    border: none;
}

シームレスをサポートしていないブラウザでは、iframe内のリンクをクリックすると、ウィンドウ全体ではなく、そのURLにフレームが移動することに注意してください。それを回避する方法はtarget="_parent"、すべてのリンクにを持たせることです。ブラウザのサポートは「十分」です。


7
たとえば、親ページのCSSスタイルを適用しないようです。
ランディ、

5
@ランディそう?これはプラス(特にユーザーが作成したコンテンツなど)として数えることができます。とにかく、キャッシュのために別のリクエストを行うことなく、CSSファイルを簡単に再び含めることができます。
bjb568 2014年

この質問に対する回答の私のニーズに答えました-別のhtmlファイルにhtmlファイルを含める方法...
Grimxn '10

2
これは、JQueryやスクリプトなしの最良の答えです。素敵なbjb568ありがとう!
DBS 2016

12
このseamless属性、元のHTMLドラフトから削除されました。使用しないでください。
Mitja

33

私が当時使用していた非常に古いソリューションは、自分のニーズを満たしていましたが、標準に準拠したコードを実行する方法は次のとおりです。

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->

<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->

9
それはそれを表示され<object><embed>そして<iframe>このためにすべての作業が、すべての3つのケースで、彼らは自分のスタイルとスクリプトコンテキストを持つ別の文書を作成し、その中ではなく、上のデフォルトのオープンによって、およびインスタンスのためのすべてのリンク(IFRAMEは特に醜いボーダーとスクロールバーが含まれます)親ページ(これはtarget = "_ parent"でオーバーライドできます)。これらすべてから、iframeはHTML5 seamless属性(bjb568で言及)を通じてより統合されることを期待できる唯一のものですが、まだ十分にサポートされていません:caniuse.com/#feat=iframe-seamless
waldyrious

2
iframe-seamlessはHTML標準github.com/whatwg/html/issues/331から削除されました。そのため、@ waldyriousコメントは正しくありません(コメントを更新しますか?)
TomášPospíšek18年

1
ヘッドアップをありがとう、@TomášPospíšek。コメントを編集することはできなくなりましたが、読者からの返信により必要な警告が得られることを願っています。明確にするために、最後の文(seamless属性について)は唯一の古い部分です-残りはまだ適用されます。
騒々しい

17

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

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

これで、単純なphpスクリプトを使用して、次のような他のファイルを含めることができます。

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

28
ええ、それは非常に悪いアドバイスです。HTMLファイルは静的であり、Apacheによって非常に高速に提供されます。ファイルを含めるためだけにすべてのhtmlファイルをphpパーサーに追加すると、サーバーで多くのパフォーマンスの問題が発生します。javascriptの方法(jQueryまたはプレーンJS)はあまり良いソリューションではありませんが、それでもこの方法よりも効率的で危険性は低くなります。
Gfra54 2014年

@ Gfra54これだけにApacheを使用するとパフォーマンスの問題が発生し、サイトでphpが機能しないということですか?または、phpとこれを一緒に使用すると遅くなりますか?
user3459110 2014年

1
注意:これらの行をに追加すると、ページがブラウザで表示されるのではなく、ファイルとしてダウンロードされる.htaccess場合がありhtmlます。最初にテストします。 免責事項:上記の解決策を試したところ、たった今、それが起こりました。私.htaccessは上の2行を除いて空でした。注意が必要です。lolo代わりにのjQueryソリューション(下記)を試してください。
cssyphus

私は以前にやったことがあるにもかかわらず、私は自分を複雑にしていました。念押し有難う。必要な目的のために、それは実際にはパフォーマンスに影響を与えないので、私はクールです。
Gman

このパフォーマンスを圧倒する答えは、すぐに使える思考の素晴らしい例です。私はそれを決して提案しませんが、PHPの大ハンマーが少し必要なときの命の恩人かもしれません。:-)
moodboom 2017年

14

以下は、一部のファイルのhtmlコンテンツを含める必要がある場合に機能します。たとえば、次の行では、OBJECT定義が発生する場所にpiece_to_include.htmlのコンテンツが含まれます。

...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...

リファレンス:http : //www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4


2
チャームのように機能し、最もクリーンなソリューションです。これは受け入れられる答えになるはずです。
vbocan

同意します。注意事項:自己終了オブジェクトタグを実行しないでください。それ以降のテキストは消去されます。
Sridhar Sarnobat

ネストされた新しい<html>および<body>タグを自動的に含む新しい「#document」を作成するようです。これは私の目的にはうまくいきませんでした。私の.htmlファイルには<script src = "..." type = "text / javascript">タグが含まれています。しかし、JSは新しい参照エラーを受け取りました。
IAM_AL_X 2018年

12

ここに私のインプレースソリューションがあります:

(() => {
    const includes = document.getElementsByTagName('include');
    [].forEach.call(includes, i => {
        let filePath = i.getAttribute('src');
        fetch(filePath).then(file => {
            file.text().then(content => {
                i.insertAdjacentHTML('afterend', content);
                i.remove();
            });
        });
    });
})();
<p>FOO</p>

<include src="a.html">Loading...</include>

<p>BAR</p>

<include src="b.html">Loading...</include>

<p>TEE</p>


1
うわー、それはもっと簡単です
Arian saputra 19/12/12

本当に素敵でシンプルなソリューション、ありがとう
ございます

11

w3.jsには、次のように機能します。

<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>

適切な説明については、これを調べてくださいhttps : //www.w3schools.com/howto/howto_html_include.asp


ドキュメントがいつ読み込まれたかを知りたい場合は、これをドキュメントの最後に置くことができます:<img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument()' style = 'display:none;'>巧妙なトリック、え?
Kaj Risberg、2018年

2
はgoogle chromeでは動作しません。
ディープセル

9

これは私を助けたものです。からb.htmlにHTMLコードのブロックを追加するa.htmlには、次のheadタグに移動する必要がありa.htmlます。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

次に、bodyタグで、b.html次のように一意のIDとJavaScriptブロックを使用してコンテナを作成し、コンテナにロードします。

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

6
この回答は、この質問の承認された回答とどのように異なりますか?
Mohammad Usman

2
@MohammadUsmanここで、コンテナーとJavaScriptコードはbodyタグにありますが、受け入れられた回答はそれらをheadタグに配置し、コンテナーをbodyタグのみに残します。
ラムティン2018年

これは新しい答えの価値はありません...コメントです
ケネットセレステ

8

私はこれが非常に古い投稿であることを知っているので、いくつかの方法は当時利用できませんでした。しかし、これは私の非常に簡単な見方です(Loloの回答に基づく)。

これはHTML5のdata- *属性に依存しているため、jQueryのfor-each関数を使用して「load-html」に一致するすべての.classを取得し、それぞれの「data-source」属性を使用してコンテンツをロードするという点で非常に一般的です。

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

7

HTMLインポートのポリフィル(https://www.html5rocks.com/en/tutorials/webcomponents/imports/)、またはその単純化されたソリューション https://github.com/dsheiko/html-importを使用できます

たとえば、ページで次のようなHTMLブロックをインポートします。

<link rel="html-import" href="./some-path/block.html" >

ブロックには独自のインポートがある場合があります。

<link rel="html-import" href="./some-other-path/other-block.html" >

インポーターは、SSIとほぼ同じように、ディレクティブをロードされたHTMLに置き換えます

これらのディレクティブは、この小さなJavaScriptをロードするとすぐに自動的に提供されます。

<script async src="./src/html-import.js"></script>

DOMが自動的に準備ができると、インポートが処理されます。さらに、手動で実行したり、ログを取得したりするために使用できるAPIを公開します。楽しい :)


スクリプト行はhtmlファイルのどこに置くべきですか?
Andrew Truckle、2018年

BODY内のどこにでも。インクルードファイルのコンテンツに再帰的に配置できます
Dmitry Sheiko

これをテストしましたか?
Bhikkhu Subhuti

きっとそうしました。私は実際に何年も使用しています。なぜ尋ねます?何か問題は?
ドミトリーシェイコ

したがって、これの「鍵」はscript async srcそれだと思われます。やってみよう!
javadba

6

ほとんどのソリューションは機能しますが、jqueryに問題があります

問題は、次のコードが$(document).ready(function () { alert($("#includedContent").text()); }含まれているコンテンツを警告するのではなく、何も警告しないことです。

私は以下のコードを記述します。私のソリューションでは、$(document).ready関数に含まれるコンテンツにアクセスできます。

(重要なのは、含まれるコンテンツを同期的にロードすることです)。

index.htm

<html>
    <head>
        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>
    </head>

    <body>
        <script>$.include("include.inc");</script>
    </body>

</html>

include.inc

<div id="test">
    There is no issue between this solution and jquery.
</div>

jqueryはgithubのプラグインを含みます


これを使用し、ブラウザからページソースを表示すると、スクリプトのみが表示されます。これは、サイトを解析する検索エンジンの機能に影響を与え、最終的にはSEOの取り組みを破壊しませんか?
hmcclungiii 2014年

はい、この方法はSEOを破壊します:)
アミールサニヤン2014年

繰り返しになりますが、JavaScriptベースのメソッドはすべてそうします。
wizzwizz4

5

指定したファイルの内容を挿入するには:

<!--#include virtual="filename.htm"-->

1
[]:[!-#include virtual = "include_omega.htm"-]に山かっこを使用
St.Eve

4

アサリの答え(最初の!)は決定的すぎました!とても良い!

ただし、インクルードするページの名前をURLパラメータとして渡したい場合は、この投稿に次の条件を組み合わせて使用​​することで非常に優れた解決策が得られます。

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

したがって、次のようになります。

あなたのURL:

www.yoursite.com/a.html?p=b.html

a.htmlのコードは次のようになります。

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }​
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 
  </head> 

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

それは私にとって非常にうまくいきました!私は助けてくれたことを願っています:)


次のリンクを誰かに送信できるため、セキュリティ上の問題:www.yoursite.com/a.html
p

4

html5rocks.comには、これに関する非常に優れたチュートリアルがあります。これは少し遅れるかもしれませんが、私自身はこれが存在することを知りませんでした。w3schoolsには、w3.jsという新しいライブラリを使用してこれを行う方法もあります。実は、これにはWebサーバーとHTTPRequestオブジェクトの使用が必要です。これらを実際にローカルにロードしてマシンでテストすることはできません。しかし、できることは、上部のhtml5rocksリンクで提供されるポリフィルを使用するか、チュートリアルに従ってください。小さなJSマジックで、次のようなことができます。

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

これにより、リンクが作成され(既に設定されている場合は、必要なリンク要素に変更できます)、インポートが設定され(既に設定されていない場合)、追加されます。次に、それを取得してHTMLでファイルを解析し、divの下の目的の要素に追加します。これは、追加要素から使用しているリンクまで、ニーズに合わせてすべて変更できます。これが役に立てば幸いです。jQueryやW3.jsなどのライブラリやフレームワークを使用せずに、より新しく、より高速な方法が出てきた場合は、問題にならない可能性があります。

更新:これにより、ローカルインポートがCORSポリシーによってブロックされたというエラーがスローされます。ディープウェブのプロパティのため、これを使用するには、ディープウェブへのアクセスが必要になる場合があります。(実用上意味がない)


4

これがFetch APIと非同期関数を使用した私のアプローチです

<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>

<script>
    const components = document.querySelectorAll('.js-component')

    const loadComponent = async c => {
        const { name, ext } = c.dataset
        const response = await fetch(`${name}.${ext}`)
        const html = await response.text()
        c.innerHTML = html
    }

    [...components].forEach(loadComponent)
</script>

3

現時点では、このタスクの直接的なHTMLソリューションはありません。でも、 HTML輸入 (恒久的であるドラフトでは、インポートが!=含めると、いくつかのJS魔法がとにかく必要とされるため)、事を行うことはありません。
私は最近VanillaJSスクリプトを書きまし HTMLをHTMLに組み込むだけで、複雑化することのないをしました。

ちょうどあなたの中に置きます a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>  

それはopen-sourceアイデアを与えるかもしれません(私は願っています)


3

次のように、JavaScriptのライブラリjQueryを使用してそれを行うことができます。

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

banner.html他のページと同じドメインに配置する必要があることに注意してください。そうでない場合、クロスオリジンリソースシェアリングポリシーbanner.htmlにより、Webページはファイルを拒否します。

また、JavaScriptを使用してコンテンツを読み込む場合、Googleはコンテンツをインデックスに登録できないため、SEOの理由から、これは必ずしも適切な方法ではないことに注意してください。


2

iFrameインジェクションを試しましたか?

ドキュメントにiFrameを挿入し、それ自体を削除します(その場合、HTML DOMにあるはずです)。

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

よろしく


1

私は似たようなものを探してこのトピックに行きましたが、loloによって引き起こされる問題とは少し異なります。他のページへのリンクのアルファベット順のメニューを保持するHTMLページを作成したいと思いました。他の各ページは存在する場合と存在しない場合があり、作成された順序はアルファベット順ではありません(数値でも)。また、タフカダソウのように、jQueryでWebページを膨らませたくありませんでした。問題を調査し、数時間実験した後、ここに私のために働いたものがあり、関連するコメントが追加されています:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

1

これはすばらしい記事です。共通ライブラリを実装し、以下のコードを使用して、HTMLファイルを1行でインポートできます。

<head>
   <link rel="import" href="warnings.html">
</head>

Google Polymerを試すこともできます


6
「以下のコードを使用して、HTMLファイルを1行でインポートする」というのはかなり不誠実です。次に、インポートしたコンテンツを利用するためにいくつかのJSを記述する必要があるため、結果として「1行」よりもはるかに多くなります。
skybondsor 2017

1

ES6バッククォートの使用``:テンプレートリテラル

let nick = "Castor", name = "Moon", nuts = 1

more.innerHTML = `

<h1>Hello ${nick} ${name}!</h1>

You collected ${nuts} nuts so far!

<hr>

Double it and get ${nuts + nuts} nuts!!

` 
<div id="more"></div>

このように、引用符をエンコードせずにhtmlを含めたり、DOMからの変数を含めたりすることができます。

これは強力なテンプレートエンジンであり、個別のjsファイルを使用し、イベントを使用してコンテンツを所定の場所にロードするか、すべてをチャンクに分割してオンデマンドで呼び出すことができます。

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals


1
良い例-なぜ(今まで)賛成票がないのですか?
javadba

ねえ、あなたは正しい、2018年の上記は実際の優れたRTFMの明確な兆候でした;)私はjavascriptそれまで趣味のプログラマーとしてそのバッジを大幅に粉砕しました。
NVRM

1

Solutionを動作させるには、ここにあるcsi.min.jsファイルをインクルードする必要があります。

GitHubに示されている例のように、このライブラリを使用するには、ページヘッダーにファイルcsi.jsを含める必要があります。次に、コンテナーに含める値に設定した値を含むdata-include属性を追加する必要があります。素子。

コピーコードを非表示

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... それが役に立てば幸い。


0

PHPはサーバーレベルのスクリプト言語です。多くのことを実行できますが、1つの一般的な使用法は、SSIと同じように、ページ内にHTMLドキュメントを含めることです。SSIと同様に、これはサーバーレベルのテクノロジです。WebサイトにPHP機能があるかどうかわからない場合は、ホスティングプロバイダーにお問い合わせください。

以下は、PHP対応のWebページにHTMLのスニペットを含めるために使用できる単純なPHPスクリプトです。

サイトの共通要素のHTMLを別のファイルに保存します。たとえば、ナビゲーションセクションは、navigation.htmlまたはnavigation.phpとして保存されます。次のPHPコードを使用して、各ページにそのHTMLを含めます。

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

ファイルを含めるすべてのページで同じコードを使用します。ハイライト表示されたファイル名をインクルードファイルの名前とパスに変更してください。


0

django / bootleのようなフレームワークを使用している場合、テンプレートエンジンが付属していることがよくあります。たとえば、ボトルを使用していて、デフォルトのテンプレートエンジンがSimpleTemplate Engineであるとします。そして以下は純粋なhtmlファイルです

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

次のように、フッター.tplをメインファイルに含めることができます。

$ cat dashboard.tpl
%include footer

それ以外に、パラメーターをdashborard.tplに渡すこともできます。


0

https://stackoverflow.com/a/31837264/4360308の回答に基づいて、 次のようにNodejs(+ express + cheerio)でこの機能を実装しました。

HTML(index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

追加-> divにコンテンツを含めます

replace-> divを置き換えます

同じ設計に従ってさらに多くの動作を簡単に追加できます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.