浏览器的后退和前进按钮不会调用回调方法与history.js的stateChange事件(brows

我用（ 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

UPDATE（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 ，如果我再次单击后退按钮，我会去页答：我不希望这种行为。我想，如果我与状态B页bbb ，并单击回来了，我会去页A，如果我点击着，我会去网页B与状态bbb 。我希望这更有意义。请帮忙

Answer 1:

你需要做的是如下：

如果你来自的页面是另一个页面（例如，你打开的网页B和预页面页面A）你做了pushState 。
如果另一方面在上一个页面相同的页面作为您目前所你可以简单的做一个replaceState ，有关您的当前状态信息更换信息。

（ 前一页的跟踪，你将需要一些变量做手工 ）

这意味着，如果你从A到B（pushState的）到（replaceState）B的新状态，返回键（转入状态A的信息）和未来前进（进入B的最新状态）。此外，如果你打开你第一次需要做一个replaceState提供有关的状态信息，以便将至少有一些状态（否则将有一个空的数据对象）。

这可能是看有用的这个回答我的，这简直是对你会建有一个有序历史堆栈的方式pushStates 。不正是你想要，当然的，但它是一个有点简单的书面和在这个答案的信息一起，应该得到你想要的行为。

Answer 2:

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

我使用History.pushState在我的网站，并没有面临这样的问题，因为这个功能犯规拉过去的状态，但添加它上面的新状态。它正在背前进按钮正确地将工作。

我希望它可以帮助你。

编辑：使用的例子change of select tag作为事件listenner：

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 3:

也，

relpaceState永远抹去B态。

使用pushState A和B的状态。

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

祝好运

文章来源: browser back and forward button does not invoke callback method with statechange event of history.js