Javascript browser back and forward按钮不使用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，然后A返回到B，则不会调用

History.Adapter.bind中的回调方法。这在chrome和IE9上都会发生。如果有人知道如何解决这个问题，我需要在单击“浏览器后退”和“浏览器前进”后获取
状态
，以更新我的DOM。请帮忙

注意：我使用版本1.7.1 jquery.history.js作为html4浏览器IE9

更新（2013年5月3日）：再多谈谈我的要求

很抱歉，我正忙于其他任务，直到现在我才不得不有时考虑这个问题。所以，
oncomplete
一个ajax调用，我获取返回给我的信息，并将其推入状态。我的要求是：如果我从A页导航到B页，然后在B页上执行大量导致DOM操作的ajax请求（让我们调用每个导致DOM操作的ajax请求A
状态
）。如果我单击“后退”按钮，我将返回到A页，如果我单击“前进”按钮，我将返回到B页，显示我所处的最后一个状态

所以我的想法是，
oncomplete
我的ajax请求，我将用我的当前状态替换历史上的最后一个状态（我的json对象是我从ajax请求返回的html）。如果我使用push state，假设我在第B页，我单击一个按钮，我的页面现在变为
aaa
，我按下state
aaa
。然后，如果我单击“其他”按钮，我的页面现在将变为
bbb
，我将按下state
bbb
。如果我现在单击后退按钮，我仍然会在B页上，状态在
History.Adapter.bind（窗口'statechange'，function（）{}）
显示为
aaa
，如果我再次单击后退按钮，我会转到A页。我不希望出现这种行为。我想知道，如果我在B页上的状态是
bbb
，然后单击后退，我会转到A页，如果我单击前进，我会转到B页的状态是
bbb
。我希望这更有意义。请帮助
我看到您正在使用
History.replaceState
，它删除堆栈中的最后一个历史状态，并将其替换为参数中给定的状态

我在我的网站中使用了
History.pushState
，并且没有遇到这样的问题，因为此函数不会提取最后一个状态，而是在其上方添加新状态。它使后退按钮正确工作

我希望它能帮助你

编辑：使用
更改选择标记作为事件列表的示例：

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
});

您需要做的事情如下：


如果您来自的页面是另一个页面（例如，您打开的是B页，而上一个页面是A页），则执行
pushState
另一方面，如果上一页与您当前所在的页面相同，您只需执行
replaceState
，将信息替换为有关当前状态的信息

（需要在某些变量中手动跟踪上一页）

这意味着，如果您从A转到B（按下状态）再转到B的新状态（替换状态），返回按钮（转到A的状态信息）和下一个前进按钮（转到B的最新状态）。此外，如果您第一次打开A，则需要使用A的状态信息执行
replaceState
，以便A至少具有某种状态（否则它将具有空数据对象）

看看我的例子可能会有用，它只是关于如何使用
pushStates
构建有序的历史堆栈。当然，这并不完全是你想要的，但它写得简单一点，再加上这个答案中的信息，它应该会让你达到你想要的行为。

relpaceState将始终擦除B状态

对A和B状态使用
pushState

并对aaa、bbb、ccc状态使用
replacestate

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 
});

祝你好运，根据我的要求，我不能使用pushState。如果我使用pushState，back按钮将返回到每个ajax请求，但我的要求有点不同，我只想保存最后一个状态。我想我们对history.js的理解不同。我所知道的是，如果您使用按钮单击History.Adapter.bind ajax请求，浏览器按钮将返回ajax请求。如果您只想保存最后一个状态，只需使用pushState并不绑定任何内容。很抱歉，我对这一点非常陌生。此外，我看到您说：如果我在ajax调用后调用manageHistory（）。。。我认为在将状态推入后，应该在managehistory中执行ajax调用stack@ThangPham您可以使用pushState，它不会返回任何ajax请求，除非您根据保存在状态中的数据显式地进行ajax调用。。。你能进一步解释你的要求吗？@NavaRajan:对不起，我正忙于其他任务，直到现在我才不得不考虑这个问题。我已经更新了我原来问题中的要求。请看一看<代码>白字和空格
：我还解释了为什么我使用replaceState而不是pushState，请查看我的原始问题中的更新re：您的更新-我认为您不想使用历史记录来跟踪B/A页中的“状态更改”。仅将历史记录与URL中的更改结合使用。单个url中的任何状态更改（即a vs B）都应该通过另一种机制（而不是通过history.replaceState（）；…使用主干或Angular之类的MV*库来保存状态。请查看jquery mobile，它们有一种处理页面的ajaxy方式，您可能会发现这很有用：@无论谁否决了我…知道它都很好