0

複数のページを持つウェブサイトを作成しています。すべてのページのトップ セクション、ナビゲーション バー、フッターはまったく同じです。別のページに移動したときに変化するのは本文だけです。私が知りたいのは、別のページに移動するときにページの本文のみをロードする方法ですが、トップ、ナビゲーション バー、フッターを表示したままにして、本文以外は何も変更されないようにする方法です。

4

3 に答える 3

3

次の 2 つの選択肢があります。

  • iframes - ページの本文がiframe要素で、iframe を変更しsrcて新しいページをロードする場所
  • AJAX - JavaScript が XMLHttpRequest を使用して新しいページの HTML を取得し、ページを再読み込みせずに本文に動的に読み込みます。
于 2013-05-29T01:27:50.153 に答える
1

これに対する昔ながらの答えは、 frame を使用することです。フレームはまさにあなたが望むことをします。サイトの上部、下部、およびメイン ペインに個別の HTML ファイルを指定するページがあります。ナビゲートすると、さまざまなページが「メイン」フレームに読み込まれます。しかし、これはさまざまな理由から、実際には行われていません。見栄えが悪く、スクロール動作が奇妙で、他のサイトへのリンクや他のサイトからのリンクが面倒です。

それを行うためのより良い方法は、 AJAXを介してメインコンテンツをロードすることです。ヘッダーとフッターのみを含むページを表示し、Javascript を使用して適切なページをサーバーから動的に引き出し、そのコンテンツをページのプレースホルダー div に挿入します。他のページに移動するには、リンクされたコンテンツをロードしてプレースホルダー内のすべてを置き換える JS コードを実行する必要があります。これにも欠点があります。履歴に特別な処理を追加する必要があり (つまり、戻るボタンを期待どおりに機能させる)、ディープ リンクを追加する必要があります (ブックマークに適切なコンテンツを読み込ませるなど)。

どちらもしないことをお勧めします。すべてのページにヘッダーとフッターのコンテンツを含める方がはるかに優れています。たくさんの場所で HTML コードを繰り返さずにそれを行う方法がいくつかあります: ページを動的に生成している場合は、すべてのページに再利用可能なテンプレートを指定できるlayoutsを見てください。正確な方法は、使用しているフレームワークによって異なりますが、例として、Rails での方法を次に示します。. ページが静的 (つまり、サーバーにアップロードする HTML ファイル) の場合は、同様のことを行う必要がありますが、オンザフライでページを生成する代わりに、静的 HTML ジェネレーターを使用してページをコンパイルします。 . これにより、ヘッダーとフッターを 1 か所で指定し、コンテンツを別々のファイルで指定できます。それらを編集した後、コマンドを実行すると、それぞれにヘッダーとフッターのコピーを含む出力ファイルが作成されます。次に、それらをアップロードします。たとえば、Jekyllを参照してください。

于 2013-05-29T01:39:15.140 に答える