使用History.js單擊後退按鈕時恢復內容

我在本地測試應用程序上實現了History.js。一切似乎都奏效，但是如果我在瀏覽器中按下後退按鈕，則以前的內容不會恢復。使用History.js單擊後退按鈕時恢復內容

當用戶按下後退按鈕時，實際上是否需要再次手動加載內容（即再次調用ajax）？那麼github怎麼做呢？我看到他們在代碼樹中單擊後退按鈕時不會再發出ajax調用。

這裏是我的代碼：

History.Adapter.bind(window,'statechange',function() 
    { 
     var State = History.getState(); 
     History.log(State.data, State.title, State.url); 
    }); 


    $('a').each(function(index, link) { 

    if ($(link).attr('data-ajax-disabled') != 'true') { 

     $(link).click(function(event) 
     { 

     var clips = $(this).attr('data-ajax-clips') || ''; 

     $.ajax($(this).attr('href'), 
     { 
      data: {_clips:clips}, 
      success: function(data) 
      { 

       var data = $.parseJSON(data); 


       History.pushState({state:1}, data.title || document.title, 'http://127.0.0.1/site/www/'); 


       $.each(data.clips, function(key, val) 
       { 
        $(key).replaceWith(val); 
       }); 

      } 
     }); 

     return false; 

     }); 
    } 
    });

data.clips是一個JSON數組，它包含HTML對象的關鍵和實際的HTML內容價值的ID的。例如

'的#header'=> '在首標格內容'

如上所述，更換工作正常。我在標題中輸出一個隨機數。每一次點擊一個鏈接都會在頭部留下另一個隨機數字。但是，如果我按下後退按鈕，數字保持不變，則只會恢復標題（也是隨機數）。

來源

2011-10-31 user990827

是，如果重寫瀏覽器歷史記錄功能，那麼你就有責任在用戶上顯示正確的內容後退或前進。爲避免對相同內容進行另一次AJAX調用，可以使用'.hide（）'將其隱藏在頁面上，或將HTML存儲在一個變量中，然後在需要時將其重新加載。 –

好吧，我明白了，也感謝Tobias Cohen的提示。

必須將加載的數據存儲在歷史對象（State.data）中。首先，讓我們看看statechange回調如何變化：

History.Adapter.bind(window, 'statechange', function() 
{ 

    var State = History.getState(); 

    $.each(State.data.clips, function(key, val) 
    { 
     $(key).replaceWith(val); 
    }); 

    History.log(State.data, State.title, State.url); 

});

正如你可以看到，在每個statechange我可以訪問State.data.clips和替換HTML內容。

注意：調用History.pushState（）時也會發生statechange。這意味着在我的第一個問題中，第二個代碼段在我做內容操作的事實上是錯誤的。沒有必要。只需調用History.pushState（）並在statechange回調中執行任何內容操作即可。

所以對於完整性，這是我推夾入到歷史對象：

History.pushState({state:1, clips:data.clips}, data.title || document.title, 'http://127.0.0.1/site/www/');

來源

2011-10-31 10:56:23 user990827

使用History.js單擊後退按鈕時恢復內容

回答

相關問題