web-dev-qa-db-ja.com

HTML / JavaScriptでの部分的なレンダリング

いくつかのHTMLファイルがあり、それらのそれぞれを別のHTMLファイルで部分的にレンダリングしたい場合、たとえばheader.htmlおよびfooter.html DRYコンセプトを遵守するため。

HTMLファイルは次のようになります。

<!--render header.html-->
<div>
    Content
</div>
<!--render footer.html-->

どうやってやるの？

javascripthtmlpartial
20
Afshin Mehrabani

リンクはこちら （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を含めるもう1つの方法です。これには、サーバーレベルのプログラミングを必要としないという利点があります。ただし、サーバーレベルのincludeメソッドよりも少し複雑です。

  1. サイトの一般的な要素のHTMLをJavaScriptファイルに保存します。このファイルに書き込まれたHTMLはすべて、document.write関数を使用して画面に印刷する必要があります。

  2. スクリプトタグを使用して、ページにJavaScriptファイルを含めます。
    <script type = "text/javascript" src = "path to file/include-file.js">

  3. ファイルを含めるすべてのページで同じコードを使用します。

注意してくださいJSバージョンは[〜＃〜]ではない[〜＃〜]理想的です。
1。 JSが無効になっているか、ブラウザーで使用できない可能性があります。
2。ページが一度にレンダリング/ロードされることはありません。

また、私はDRYは本当にこれに数えるとは思いません。Dreamweaverなどのページテンプレートを作成するIDEの使用を検討してください）。

勇気があり（少し古臭い）、上記のいずれも使用できない場合は、コンテンツにiframeを使用することを検討してください。

<html>
    <body>
      <div>my header</div>
      <iframe src="mycontent.html" />
      <div>my fooder</div>
    </body>
</html>

[〜＃〜]免責事項[〜＃〜]
iframeやJSのアプローチを実装するよりも、自分の手を切りたいと思います。実際に[〜＃〜] [〜＃〜]が必要かどうかについて、十分に検討してください。

20
Paul Fleming

プレーンHTMLとJavaScriptだけを使用している場合は、jQueryをインクルードし、AJAXリクエストを使用して、メインページの別のHTMLページの候補をロードすることができます。

ここでjQueryの「load（）」関数を見てください：

http://api.jquery.com/load/

あなたが次のhtmlを持っていると仮定します：

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

あなたの使用法は次のようになります：

$('#header').load('header.html');
$('#footer').load('footer.html');
24
dougajmcdonald

Html/jsのみのクライアント側のみのソリューションを探している場合は、AngularJSとそのngInclude構文を確認する必要があります。

http://docs.angularjs.org/#!/api/ng.directive:ngInclude

5
Christoph

サーバーサイドプログラミングを使用している場合はサーバーサイドインクルードを使用できます。ホストファイルがHTMLファイルの場合は、html SCRIPTタグを使用してheader.htmlファイルとfooter.htmlファイルをインクルードできます。しかし、HTMLファイルを部分的にレンダリングすることで、実際に何を意味するのかわかりませんか？

3
Shant