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

如果我在调用ajax之后调用manageHistory()，则会正确调用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日）：更多地谈谈我的要求

抱歉，我正忙于完成其他任务，直到现在我才有时间看这个问题。所以ajax调用的oncomplete，我把那些返回给我的信息，并将其推入状态。我的要求是：如果我从页面A导航到页面B，然后导航到页面B，我执行导致DOM操作的ajax请求数量（让调用导致DOM操作的每个ajax请求state）。如果我单击后退按钮，我应该返回到页面A，如果我单击前进按钮，我应该转到页面B，其中包含我所处的最后状态。

所以我的想法是，oncomplete我的ajax请求，我会用我当前的状态替换历史记录中的最后一个状态（我的json对象是我从ajax请求收到的html）。如果我使用推送状态，请说我在页面B上，然后单击一个按钮，我的页面现在更改为aaa，我推送状态aaa。然后，如果我点击其他按钮，我的页面现在变为bbb，我推送状态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的最新状态）。此外，如果您第一次打开A时需要执行replaceState，其中包含有关A状态的信息，以便A至少具有某种状态（否则它将具有空数据对象）。

查看我的this answer可能很有用，这只是关于使用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
});

Answer 3

另外，

relpaceState将始终擦除B状态。

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

祝你好运

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

3 个答案: