javascript – 浏览器后退和前进按钮不会使用history.js的statechange事件调用回调方法

我使用(https://github.com/browserstate/history.js)并有一段这样的代码

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日)：更多地谈谈我的要求

对不起,我正忙着处理其他任务,直到现在我才有时间看这个问题.因此,ajax调用完成后,我将那些返回给我的信息推送到状态.我的要求是：如果我从页面A导航到页面B,然后导航到页面B,我执行导致DOM操作的ajax请求数量(让每个调用导致DOM操作的ajax请求成为状态).如果我单击后退按钮,我应该返回到页面A,如果我单击前进按钮,我应该转到页面B,其中包含我所处的最后状态.

所以我的想法是,我的ajax请求不完整,我会用我当前的状态替换历史中的最后一个状态(我的json对象是我从ajax请求收到的html).如果我使用推送状态,请说我在页面B上,然后单击一个按钮,我的页面现在更改为aaa,我pushState aaa.然后如果我点击其他按钮,我的页面现在变为bbb,我pushState bbb.如果我现在单击后退按钮,我仍然会在页面B上,我的状态在History.Adapter.bind(窗口,’statechange’,function(){})显示为aaa,如果我再次单击后退按钮,我会转到第A页.我不想要这种行为.我希望如果我在页面B上有状态bbb,然后单击返回,我会转到页面A,如果我单击向前,我将转到页面B,状态为bbb.我希望这更有意义.请帮忙

最佳答案

你需要做的是如下：

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

(跟踪您需要在某个变量中手动执行的上一页)

这意味着如果从A到B(pushState)到新状态B(replaceState),后退按钮(转到A的状态信息)和下一个转发(转到B的最新状态).此外,如果您第一次打开A时需要使用有关A状态的信息执行replaceState,以便A至少具有某种状态(否则它将具有空数据对象).

查看我的this answer可能是有用的,这只是关于使用pushStates构建有序历史堆栈的方式.当然不完全是你想要的,但它写得有点简单,再加上这个答案中的信息,它可以让你得到你想要的行为.