$（）。ページ全体を読み込む代わりにload（）を実行しますが、すべてのページにメニューを保存する必要があります

Question

jQuery/AJAX $().load()機能を使用して、私のウェブサイトのコンテンツ領域をリロードします。しかし、私の問題は、headerとfooterが、エントリのURLに関係なくすべてのページに表示される必要があるということです。

私のサイトはテンプレートを使用してビルドされているので、最初の考えでは、レイアウトの出力を一意のコンテンツの上と下に削除しました。メニューは2回表示されません。しかし、ユーザーが最初のページから自分のサイトに入っていない場合、index.phpと言うと、ヘッダーやフッターが文字化けしていないテキストページにしか見えません。

私の質問は、この問題を回避する方法です。 JavaScript（+ jQuery）とHTML5は許可されています。

Answer 1

page.php：

<div id="header"></di> 
<div id="mainContent"></div> 
<div id="footer"></div> 

JS：

$("#content").load("page.php #mainContent"); //that will only load mainContent 

か：詳細については

$.get('page.php', function (data) { 
    data = $(data).find('#mainContent').html(); 
    $("#content").empty().append(data); 
}); 

、load() and page fragments

Answer 2

にjQueryのドキュメントのセクションを参照してくださいTあなたが探しているechniqueは、AJAXリクエストからの応答を傍受し、レンダリングされたページで置き換えたいDOMの部分だけを取り出すHijaxとして知られています。

一般的な考え方では、実際のURL自体はフルページのコンテンツを返すため、新しい訪問者からのリクエストの場合はDOM全体が読み込まれますが、リクエストがハイジャックされたリンクが指定されたCSSセレクタでページ上にある場合、セレクタによって識別されたページの一部のみが置き換えられます。

Hijax - jQuery Pluginをご覧ください。実際のサイト自体はプラグインを使用して構築されています。ネットワークタブを見て、ChromeやFirebugツールのインスペクタを見ると、メニューやヘッダなどの要素を置き換えずにコンテンツがスワップアウトされていることがわかります交換されていません。

Answer 3

さまざまなオプションがいくつかあるようです。ユーザーがサイトにアクセスしても最初のページに移動していない場合は、ページが読み込まれた後にヘッダーとフッターが表示されていることを確認するだけです。それらが見つからない場合は、初期サイトレイアウトを作成する必要があります。すべてのページが同じように処理されるように、あなたも、あなたにも楽しませることができ、間違いなく他の解決方法はありません

$(document).ready(function() { 
    // If an element of id "header" isn't found in the DOM 
    if (!$("#header").length() > 0) { 
     // Generate the header and insert it as the first element of the DOM 
    } 
    if (!$("#footer").length() > 0) { 
     // Generate the footer and append it to the last element of the DOM 
    } 
}); 

最初のページ（index.phpのに）この方法を構築することを決定することもできます。ページがAJAXリクエストではなくGETでリクエストされた場合にのみインクルードされる各ページにインクルードを含めることができます。