0

私は jQuery を使用する ajax サイトを持っていますが、ユーザーがページを更新して適切なコンテンツをロードできるようにする方法を考えています。

ユーザーがウェブサイト ドメインの href 属性を持つ要素をクリックすると、そのページのコンテンツがメイン div に読み込まれるようにしています。ロードされた html コンテンツは html ドキュメント全体であるため、ページのフラグメントはロードしていません。History.js を使用して、URL とハッシュの変更をチェックしています。しかし、ページを更新すると、静的コンテンツのみが読み込まれ (スタイルが解除され)、メインのホームページのヘッダーとフッターは読み込まれません。もう 1 つの問題は、GET 404 エラーを回避するために既存のハッシュをクリアする必要があることです。私が明らかに望んでいるのは、ページ全体が正常にロードされることです。

これまでの私のコードは次のとおりです。

jQuery(document).ready(function() {
    // Prepare
    var History = window.History; // Note: We are using a capital H instead of a lower h
    if ( !History.enabled ) {
        console.log("History is not enabled.");
         // History.js is disabled for this browser.
         // This is because we can optionally choose to support HTML4 browsers or not.
        return false;
    }
    else {
        console.log("History is enabled");
    }

    //vars for history
    var changes = 0;
    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
        var State = History.getState(); // Note: We are using History.getState() instead of event.state
        History.log(State.data, State.title, State.url);
    });

    $("a").click(function(e) {
        e.preventDefault();
        $("#content").load(this.href, function() {
            // Change our States
            changes++;
            History.pushState({state:changes}, "State " + changes, "#" + this.href); // logs {state:1}, "State 1", "?state=1"
        });
});
4

1 に答える 1

1

HTML5を使用していますか? ローカル永続化メソッドを使用して、ajax を介してロードされたアイテムを維持したり、特定のキー、ロード時に必要なコンテンツを入力するために必要な ID を保存したり、ページを更新したりできます。

HTML5がなければjQuery.dataのオプションがありますが、ページが更新される前に永続的なアイテムをキャッチ/保存できるとは思わないので、これが実行可能な解決策になる可能性は低いです-私ができる唯一の他のオプション考えられるのは、Cookie（インメモリ、JavaScript（jQuery）で作成）を使用することです。これは、解決策として、すべての状態を同期するためのさまざまなポイントが（潜在的に）少し悪夢になるため、更新/再読み込みが行われます正しいものを入力します....しかし、うまく設計されていれば、うまくいく可能性があります。

于 2012-06-15T15:59:06.990 に答える