私は何をしたいのかを明確にしようとしています。私はいくつかのHTMLファイルを持っており、DRYの概念を観察するために、それぞれheader.htmlとfooter.htmlのように、別のHTMLファイルを部分的にレンダリングしたいとします。HTML/JavaScriptの部分レンダリング
HTMLファイルには、次のようになります。
<!--render header.html-->
<div>
Content
</div>
<!--render footer.html-->
はどのように私はそれを行うことができますか？
Here's a link（Googleの最初のものが追加される可能性があります）では、これをさまざまな言語で行う方法について説明しています。
また、いくつかのIDEがこれに対応しています。 Dreamweaverはその一例です。 ASP.NETにはマスターページがあります。等々。
PHP：
<?php
require($DOCUMENT_ROOT . "path to file/include-file.html");
?>
ASP：
<!--#include file="path to file/include-file.html"-->
JS：
JavaScriptがお使いの サイトのページにHTMLを含めるための別の方法です。これにはサーバーレベルのプログラミングが不要なという利点があります。プログラミングは です。しかし、サーバーレベルの メソッドを含むよりも少し複雑です。
サイトの共通要素のHTMLをJavaScript ファイルに保存します。このファイルに書き込まれたHTMLは、document.write関数を使用して の画面に出力する必要があります。
スクリプトタグを使用して、ページに JavaScriptファイルを含めることができます。
<スクリプトタイプ=「テキスト/ javascriptの」SRC =「/ファイルへのパスfile.js含ま」>- 使用すること ファイルを含めたいすべてのページに同じコード。
JSのバージョンが理想的ではないことをに注意してください。
1. JSが無効になっているか、ブラウザで使用できない可能性があります。
2.ページは一度にレンダリング/ロードされません。
また、私はDRYがこの1つを本当に考慮するとは思わない。ページテンプレートを作成するIDEを使用することを検討してください（Dreamweaverなど）。あなたは勇気（と昔ながら少し古い）であり、あなたが上記のいずれかを使用できない場合
、あなたのコンテンツのためのiframeを使用することを検討してください：
<html>
<body>
<div>my header</div>
<iframe src="mycontent.html" />
<div>my fooder</div>
</body>
</html>
免責
私は希望むしろiframeやJSのアプローチを実装するよりも自分の手を切ってしまいます。これを行うには実際にが必要かどうかを深く検討してください。
彼はHTMLファイルをHTMLファイルに入れようとしていますが、どのように.html拡張ファイルにPHPを使用していますか？ – DannyG
@DannyG私の答えは、これがどのように多くの技術で達成できるのかを示しています。私はそれをお勧めしませんが、OPがHTMLファイルでこれを行う場合、オプションはJSまたはIFRAMEです（私の投稿に記載されています）。 JSセクションからの引用：「サーバーレベルのプログラミングを必要としない」 –
@DannyG JSはXHRリクエストを作成してコンテンツを取り込むこともできます。 –
サーバーサイドプログラミングを使用している場合は、ホストファイルがHTMLファイルの場合はサーバーサイドインクルードを使用できます。次に、html SCRIPTタグを使用してheader.htmlファイルとfooter.htmlファイルを含めることができます。しかし、HTMLファイルを部分的にレンダリングすることが実際に何を意味するのかは分かりません。
私はサーバーサイド言語を使用していません。 JavaScript、HTML、jQueryのみ。 –
その場合、SCRIPTタグを使用して、HTMLファイルのURLを持つsrc属性のHTMLファイルを含めることができます。 flemが投稿した記事は非常に役に立ちます。 – Shant
プレーンHTMLとJavascriptを使用している場合は、jQueryをインクルードしてAJAXリクエストを使用して、メインページの別のHTMLページの競合を読み込むことができます。
：<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
あなたの使用量は次のようになります：あなたの次のHTMLをしていると仮定すると、
：
はここにjQueryの 'ロード（）' 関数を見てください
$('#header').load('header.html');
$('#footer').load('footer.html');
これは私にクロスオリジン要求エラーを引き起こします： -/ – ajbraus
CORSを有効にしていない限り、別のドメインからコンテンツをロードしようとするとします – dougajmcdonald
...またはこれをローカルのhtmlファイルから実行している場合。 – marsze
クライアント側のみを探している場合あなたはAngularJSとそのngInclude構文を見てください。
ありがとうChristoph！ "ng-include src"はcoolですが、fragment.jsは同じ作業をしますが、エラーを発生させます.... – dfang
あなたは別で1つのHTMLファイルの内容を含めるようにしたいですか？ – starbeamrainbowlabs
@starbeamrainbowlabs：まさにそうです。 –
PHPや別のサーバーサイドプログラミング言語を使用できますか、それともすべてのクライアント側でなければなりませんか？ – starbeamrainbowlabs