2012-01-05 12 views
0

私の目的は、ブラウザの戻るボタンを押してその状態に戻ることができるように、Webサイトの現在の状態を保存することです。現在、私は次のようにHTML5のネイティブ機能を使用してpushStateとpopStateを使用して、これを達成した:BalopptonのHistory.jsでonpopstateを使用して戻るには

<script type="text/javascript"> 
    $("a").click(function(e) { 
    $("#element").load($(this).attr('href') + ' #otherElement'); 
    $("html, body").animate({ scrollTop: 0 }, 0); 
    previous_page = location.href; 
    window.history.pushState({page: $(this).index()}, $(this).html(), $(this).attr('href')); 
    e.preventDefault(); 
    return false; 
    }); 

    window.popupstate = function(e) { 
    location.reload(); 
    } 
</script> 

のFirefox 4で期待どおりにコードの一部が機能することをしかし、Chromeで、ページが恒久的に再読み込みします。したがって、BaluptonのHistory.jsライブラリを使用してすべてのブラウザでコードスニペットを実行したいと思いますが、Baluptonのページの例はあまり役に立ちません。

var History = window.History; 
History.pushState({state:'root'},'root',$(this).attr('href')); 

$("a").click(function(e) { 
    $("#element").load($(this).attr('href') + ' #otherElement'); 
    $("html, body").animate({ scrollTop: 0 }, 0); 
    History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href')); 
    return false; 
}); 

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); // Note: We are using History.getState() instead of event.state 
    History.log('statechange:', State.data, State.title, State.url); 
    if (State.title == 'root') { 
     History.back(); 
     location.reload(); 
    } 
}); 

ありがとう:

私は(動作しない)次のことを試してみました。

答えて

1

問題の解決策を見つけました。

var History = window.History; 

$("a").live('click', function(e) { 
    if ($(this).attr('href').startsWith('corpus-')) { 
     $("#element").hide(); 
     $("#newElement").load($(this).attr('href') + ' #otherElement'); 
     $("html, body").animate({ scrollTop: 0 }, 0); 
     History.pushState({state:$(this).attr('href')},$(this).attr('href'),$(this).attr('href')); 
     return false; 
    } 
}); 

History.Adapter.bind(window,'statechange',function(){ 
    var State = History.getState(); 
    History.log('statechange:', State.data, State.title, State.url); 
    $("#element").toggle(); 
    $("#newElement").toggle(); 
}); 

を解決はまだ、非常に理想的ではありません。全体のDOMパスを交換しながら、私はバインディングを失うおりますので、私は次のように要素を表示/非表示にする必要があります。

関連する問題