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

Question

我使用(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);
}

如果我在调用manageHistory()ajax之后调用,则会History.Adapter.bind正确调用回调方法.但是,如果我单击浏览器然后单击前进按钮导致页面导航从B到A,然后A返回到B,History.Adapter.bind则不会调用内部的回调方法.这种情况发生在chrome和IE9上.任何人都知道如何解决这个问题,我需要先State点击浏览器然后转发,以更新我的DOM.请帮忙

注意:我使用版本1.7.1 jquery.history.js用于html4浏览器IE9

更新(2013年5月3日):更多地谈谈我的要求

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

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

Answer 1

你需要做的是如下:

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

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

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

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

Answer 2

我看到您正在使用History.replaceState它删除堆栈中的最后一个历史状态并将其替换为参数中给出的状态。

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

我希望它对你有帮助。

编辑：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
});