15

history.JS (最新) を Jquery (最新) と共に使用して、Web サイトの一部だけを読み込んで置き換えています。ハッシュ変更で。

すべてが機能しているように見えますが、ブラウザー (最新の FF と Chrome) の [戻る] ボタンをクリックしても、ページは変わりません (URL とタイトルは変わります)。グーグルでここを見てみましたが、何が起こっているのかわかりません。

スタック オーバーフローを見ると、次のページが見つかりました: History.js で戻るボタンをクリックするとコンテンツが復元され、同様の質問をしているようです。#left_col (置換される div) のロードされたコンテンツを状態データに追加しましたが、そこからどこに行くべきかよくわかりません。状態が変化したときにそのデータをリロードする必要があることはわかっています。しかし、方法がわかりません。

var History = window.History; 
var origTitle = document.title;
if ( !History.enabled ) {
    return false;
}
    
History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState();     
    History.log(State.data, State.title, State.url);
});

$('.ajaxload').live("click", function() {
    History.pushState({state:1,leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));
    $('#left_col').load($(this).attr("rel"));
    return false;
});

助けていただければ幸いです。

アップデート：

ユーザーがクリックして戻ったときにページを変更することができましたが、正しい状態をロードしません (1 つではなく 2 つの状態に戻るようです)。上記のコードに追加したコードは次のとおりです。

window.addEventListener('popstate', function(event) {
    var State = History.getState(); 
    $('#left_col').html(State.data.leftcol);
});
4

2 に答える 2

10

考えていた poState ではなく、History.js を使用して statechange のページを更新する必要があることがわかりました。以下は、同じ問題を抱えている可能性のある人のための私の完全な（そして機能する）コードです。

    var History = window.History;
    var origTitle = document.title;

    if ( !History.enabled ) { return false; }
    History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save initial state to browser history

    function updateContent(data) {
        if(data == null) return;                    // check if null (can be triggered by Chrome on page load)
        $('#left_col').html(data);              // replace left col with new (or old from history) data
        History.pushState({state:$(this).attr('data-state'),leftcol:$('#left_col').html()}, origTitle, $(this).attr("href"));           // save this state to browser history
    }

    History.Adapter.bind(window,'statechange',function(){           // use this NOT popstate (history.JS)
        var State = History.getState();
        //History.log(State.data, State.title, State.url);
        updateContent(State.data.leftcol);                                          // call update content with data for left col from saved state
    });

    $('.ajaxload').live("click", function() {                                   // attach click event, get html and send it to updateContent
        $.get($(this).attr("rel"), updateContent);
        return false;
    });
于 2012-06-25T21:54:44.390 に答える
0

状態が変化したときにデータをリロードする必要があると言うのは正しいです.JavaScriptで変更を元に戻すか、コンテンツを元の状態から再度レンダリングする必要があります.

これはおそらくあなたの議題により適しているでしょう： https://github.com/thorsteinsson/jquery-routes

編集：

backbone.js (http://backbonejs.org/) の使用を検討することもできます。これは、何を行う必要があるかを理解しやすくする方法で構造と抽象コードを作成するのに役立つからです。

バックボーンには、独自の URL ルーターといわゆるビューが付属しています。

于 2012-06-21T20:50:57.827 に答える