6

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

私のサイトはテンプレートを使用して構築されているので、最初に考えたのは、一意のコンテンツの上下にあるレイアウトの出力を削除することでした。メニューが2回表示されないようにします。しかし、ユーザーが最初のページ、たとえばindex.phpから自分のサイトにアクセスしていない場合、スタイルのないテキストページだけにヘッダーやフッターが表示されることはないことに気付きました。

私の質問は、この問題をどのように回避しますか？JavaScript（+ jQuery）およびHTML5が許可されます。

4

3 に答える 3

5

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（）とページフラグメントに関するjQueryドキュメントのセクションを参照してください。

于 2012-04-15T22:31:52.860 に答える
1

いくつかの異なるオプションがあるようです。ユーザーがサイトにアクセスしているが最初のページにアクセスしていない場合は、ページが読み込まれた後にヘッダーとフッターが表示されていることを確認できます。それらが見つからない場合は、最初のサイトレイアウトを作成する必要があります。すべてのページが同じように処理されるように、この方法で最初のページ（index.php）を作成することもできます。

$(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
    }
});

あなたが同様に楽しませることができる他の解決策は間違いありません。おそらく、ページがAJAXリクエストではなくGETを介してリクエストされた場合にのみインクルードされる、各ページにインクルードを含めることができます。

于 2012-04-15T22:42:29.790 に答える
0

探している手法はHijaxと呼ばれ、AJAXリクエストからの応答をインターセプトし、レンダリングされたページで置き換える予定のDOMの部分のみを引き出します。

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

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

于 2012-04-15T22:35:27.517 に答える