14

私はほぼ 30 の html を持つアプリケーションを持っており、それらはすべてのページで変更する必要がある変更を fi が行ったいくつかの共通コードを共有しています。以下は、すべてのページで使用しているコードです。

<div>
  <ul>
    <li class="current"><a href=".html" ></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
    <li><a href=".html"></a></li>
  </ul>
 </div>

単一のファイルに保存して、必要な場所で再利用できるソリューションはありますか?

4

4 に答える 4

17

コードをより保守しやすくするために、この組み込みを実現する方法はいくつかあります。

PHP

もちろん、最初に頭に浮かぶのは、PHP を使用する場合include()、外部ファイルまたはスクリプト内のコードをインクルードして評価する使用法です。

次のように使用できます。

<?php include('path/to/file.html'); ?>

ノート！注意:.phpこのディレクティブがサーバーから評価されるためには、コンテナー ファイルがファイルである必要があります。そのためには、ファイル拡張子を変更する以外に何もする必要はありません。そしてもちろん、サーバーが PHP を解析できることを確認してください。

また、 との違いにも注意してくださいinclude_once()。この場合はお勧めしません。

SSI (サーバー側インクルード)

PHP を使用したくない場合は、サーバー側のインクルード[ Wikipedia ]を使用して、非常にシンプルかつクリーンに行うことができます。SSI は HTML コメントのように見えます。

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

ノート！mod_includeApache サーバーにインストールして有効にし、 または ファイルに次のディレクティブを追加する必要がhttpd.confあり.htaccessます。

Options +Includes

詳細については、上記のドキュメント リンクを参照してください。

クライアント側のインクルード

あなたの質問は、実際にはJSまたはjQueryでこれを行うことを指定しています。サーバー側のオプションを知らなかったからなのか、クライアント側のオプションが本当に必要なのかはわかりません。いずれにせよ、クライアント側のソリューションもいくつかあります。

可能性を考慮して、問題に対するサーバー側のソリューションをお勧めします。

IFrame 要素

この<iframe>要素には、ページ内の別の領域にある外部ファイルのコンテンツが含まれます。次のように使用できます。

<iframe src="your.html" width="x" height="y"><p>Fallback text</p></iframe>

オブジェクト要素

この<object>要素は と同様のことを行います<iframe>が、後者はアプリケーションをサンドボックス化する手段としてより設計されていますが、前者はよりページに統合されているように感じます。使用方法は次のとおりです。

<object type="text/html" data="your.html"></object>

Javascript の挿入

コードを Javascript ファイルに変換し、コンテンツを DOM に挿入するようファイルに指示します。ここに例があります

external.js

var element = '<div>
                   <ul>
                     <li class="current"><a href=".html" ></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                     <li><a href=".html"></a></li>
                   </ul>
               </div>';

container.html

<script type="text/javascript" src="external.js"></script>
<script>
     document.getElementById('#containing-element').innerHTML(element);
</script>

AJAX

jQuery は、一部の AJAX 呼び出しを簡単に処理するのに役立ちます。jQuery.get()またはを使用できますjQuery.load()。後者を使用することをお勧めします。これはload()、読み込まれた要素を DOM に直接挿入し、また、読み込む部分を正確に指定できるためです。これは、すべてのインクルードを 1 つの外部 HTML ファイルに保存する場合に特に便利です。

jQuery(document).ready(function ($){
    $('#containing-element').load('your.html');
});
于 2013-04-05T11:43:40.517 に答える
-1

に対する回答は既に得られてPHPいますが、それを使用したくない場合や使用できない場合は、JS ファイルに保存できます。 test.js

document.write('<div>\n\
  <ul>\n\
    <li class="current"><a href=".html" ></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
    <li><a href=".html"></a></li>\n\
  </ul>\n\
 </div>');

そしてそれを含めます：

<script type="text/javascript" src="test.js"></script>

しかしもちろん、より良いPHPです。

于 2013-04-05T11:11:14.337 に答える