浏览器的后退和前进按钮不会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 
}); 

好运