22

header.html私はいくつかのHTMLファイルを持っていますが、たとえば、footer.htmlDRYの概念を観察するために、それぞれを別のHTMLファイルに部分的にレンダリングしたいと思います。

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

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

どうやってやるの？

4

5 に答える 5

27

プレーンな 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');
于 2012-07-22T07:46:47.207 に答える
22

さまざまな言語でこれを行う方法を説明するリンク (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 つの方法です。これには、サーバーレベルのプログラミングを必要としないという利点があります。ただし、サーバー レベルのインクルード メソッドよりも少し複雑です。

  1. サイトの共通要素の HTML を JavaScript ファイルに保存します。このファイルに記述された HTML は、document.write 関数を使用して画面に出力する必要があります。

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

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

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

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

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

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

免責事項
iframe または JS アプローチを実装するよりも、自分の手を切り落としたいと思います。本当にこれを行う必要があるかどうかを深く検討してください。

于 2012-07-22T07:43:23.747 に答える
5

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

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

于 2012-07-22T07:48:41.343 に答える
3

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

于 2012-07-22T07:44:06.563 に答える