瀏覽器的後退和前進按鈕不會history.js

Question

我用（https://github.com/browserstate/history.js）的stateChange事件調用回調函數，並有一個像這樣

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    alert('Inside History.Adapter.bind: ' + State.data.myData); 
}); 

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 
} 

的一段代碼，如果我在我的Ajax調用後調用manageHistory()，然後History.Adapter.bind回調方法調用正確。但是，如果我點擊瀏覽器的後退，然後單擊前進按鈕結果頁面導航從B到A，然後回到B，回調方法裏面History.Adapter.bind不會被調用。這發生在Chrome和IE9上。任何人都知道如何解決這個問題，我需要點擊瀏覽器後點擊State，然後轉發，以更新我的DOM。請幫助

注：我使用的版本1.7.1 jquery.history.js爲HTML4瀏覽器IE9

更新（2013年5月3日）：談一點關於我的要求

對不起我忙於完成其他任務，直到現在我有時纔會看到這個問題。因此，我調用了一個ajax調用的oncomplete，這個信息返回給我，並將它推入狀態。我的要求是：如果我定位從網頁A指向網頁B，然後在頁面B，我執行導致DOM操作Ajax請求的數量（我們稱之爲導致DOM操縱state每個Ajax請求）。如果我點擊後退按鈕，我應該返回到頁面A，如果我點擊前進按鈕，我應該轉到頁面B，並顯示最後一個狀態。

所以我的想法是，我的oncomplete ajax請求，我會用當前狀態替換歷史記錄中的最後一個狀態（我的json對象是我從ajax請求接收的html）。如果我使用推送狀態，假設我在頁面B上，並單擊一個按鈕，我的頁面現在更改爲aaa，我推送狀態aaa。然後，如果我點擊其他按鈕，我的頁面現在更改爲bbb，我推送狀態bbb。如果我現在點擊後退按鈕，我仍然會在頁面B，我的狀態History.Adapter.bind(window, 'statechange', function() {})顯示爲aaa，如果我再次單擊後退按鈕，我會去頁答：我不希望這種行爲。我想，如果我與狀態bbb B頁面，點擊後，我會去頁A，如果我點擊着，我會去網頁B與國家bbb。我希望這更有意義。請幫助

Answer 1

我看到你正在使用History.replaceState其刪除最後一個歷史狀態堆棧，並通過在參數給出的狀態替換它。

我在我的網站使用History.pushState，並沒有面臨這樣的問題，因爲這個功能犯規拉過去的狀態，但添加它上面的新狀態。它正在使後退按鈕正常工作。

我希望它能幫助你。

編輯：使用作爲事件listenner的change of select tag的例子：

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 
} 

$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistory(url, data, uniqueId) 


}); 

History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    // Launch the ajax call and update DOM using State.data.myData 
}); 

Answer 2

你需要做的是：

• 如果你來自的頁面是另一個頁面（如你打開頁面B，前一頁是頁面A）你做了一個pushState。
• 另一方面，如果上一頁與當前頁面相同，則只需執行replaceState，將信息替換爲有關當前狀態的信息。

（前一頁的跟蹤，你需要手動做一些變量）

這意味着，如果你從A到B（pushState的）到B的新狀態（replaceState） ，後退按鈕（前往A的狀態信息）和下一個前進（前往B的最新狀態）。此外，如果您第一次打開A時需要使用有關A狀態的信息（replaceState），以便A至少具有某種狀態（否則它將具有空數據對象）。

查看我的this answer可能是有用的，這很簡單，就是您將構建一個有序歷史堆棧的方式，其中包含pushStates。當然不完全是你想要的，但它的寫法稍微簡單一些，並且與這個答案中的信息一起，它會讓你得到你想要的行爲。

Answer 3

此外，

relpaceState將始終擦除乙狀態。

對於A和B狀態使用pushState。

並使用replacestate作爲aaa，bbb，ccc狀態。

function manageHistoryBack(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.replaceState({myData: data}, null, '?stateHistory=' + uniqueId); 


} 

function manageHistory(url, data, uniqueId){ 
    var History = window.History; 
    if (!History.enabled) { return false; }   
    History.pushState({myData: data}, null, '?stateHistory=' + uniqueId); 


} 

// Event listenner triggering aaa,bbb,ccc 
$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistoryBack(url, data, uniqueId) 


}); 

// Event listenner triggering A, B 
$('select.select').change(function(e) { 

    e.preventDefault(); 

    // get url 
    // get data 
    // get uniqueId 

    manageHistory(url, data, uniqueId) 


}); 


History.Adapter.bind(window, 'statechange', function() { 
    var State = History.getState(); 
    // Launch the ajax call and update DOM using State.data.myData 
}); 

好運