0

開発中の一連の大きな html ページがあり、それぞれがヘッダー/コンテンツ/サイドバーという共通の構造を使用しています。

ヘッダー セクションとサイドバー セクションには、すべてのページに共通のコードがあります。内容のみ変更。

開発段階では、ヘッダーとサイドバーを一度変更すれば、各ページを個別に編集しなくても、すべてのページに複製された結果を確認できるようにしたいと考えています。

少しグーグルで調べてみたところ、最も簡単な解決策は、ヘッダー セクションとサイドバー セクションのコードを含む 2 つの別個のテキスト ファイルを作成し、これを編集中の HTML ページの適切なポイントに挿入することです。

ロード時間が劇的に増加するため、これはライブ プロジェクトにはお勧めできませんが、開発作業では多くの時間を節約できます。

同意しますか？もしそうなら、これを行う最も簡単な方法は何ですか？

ありがとう

4

3 に答える 3

6

これは、PHP などのサーバー側のテクノロジを使用して行うことをお勧めします。ページはブラウザーに送信される前に連結されるため、読み込み時間への影響は無視できます。

次のようなことを行うことでそれを達成できます。

<?php require('header.php'); ?>

<!-- Main content goes here --> 

<?php require('sidebar.php'); ?>

そして、header.php と sidebar.php ファイルをメイン ファイルと同じディレクトリに配置します。

于 2013-07-10T15:12:58.427 に答える
0

相互にファイルを含めることを可能にするある種のサーバー側テンプレート言語を使用します。

于 2013-07-10T15:12:58.847 に答える
0

他の回答にもかかわらず、JavaScript からこれを行うことを主張する場合は、次のモジュールを使用します。

(function xload (slctr) { //================================================== xload ===
  function xloader (src, dst) {
    if (arguments.length == 1) {
      dst = src;
      src = dst.getAttribute ('data-source') || '';
    }

    var req;

    try {
      src = src.match (/^([^]*?)(!)?(?:\[\[([^]*?)\]\])?$/);
      (req = new XMLHttpRequest ()).open ('GET', src[1], !src[2]);
      req.onreadystatechange = function (ev) {
        if (this.readyState === 4) {
          if (typeof dst == 'function')
            dst (req);
          else {
            dst[dst.tagName == 'TEXTAREA' ? 'value' : 'innerHTML'] = this.responseText;
            [].forEach.call (dst.getElementsByTagName ('SCRIPT'), function (s, i) {
              var script = document.createElement ('script');
              script.innerHTML = s.parentNode.removeChild (s).innerHTML;
              document.body.appendChild (script);
            })
          }
        }
      };
      src[3] && req.overrideMimeType &&
        req.overrideMimeType (src[3]);
      req.send (null);
    } catch (err) { console.log ('xloader error : ', err); }
  }

  [].forEach.call (document.querySelectorAll (slctr), function (el) { xloader (el); });

}) ('[data-source]'); //------------------------------------------------------ xload ---

属性divを持つ要素など、すべての要素が処理されます。data-sourceはdata-source、含めるファイルの URL を指定します。Ajax リクエストが完了すると、コンテンツ全体divがフェッチされたテキストに置き換えられます。data-sourc必要に応じて、urlの後に同期ロードを示し、次にと!で囲まれた Mime タイプを続けることができます。[[]]

読み込まれたテキスト内のすべてのスクリプトが抽出され、ドキュメントの本文に挿入されます。

エラー状態はコンソールに報告されます。

モジュールは完全にスタンドアロンで、data-source属性を含むすべての要素を処理します。もちろん、ページの HTML テキストの後にロードする必要があります。

于 2013-07-10T15:50:26.393 に答える