5

我使用（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 返回到 BHistory.Adapter.bind ，则不会调用内部的回调方法。这发生在 chrome 和 IE9 上。任何人都知道如何解决这个问题，我需要让State点击后浏览器返回然后转发，以更新我的 DOM。请帮忙

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

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

对不起，我正忙于其他任务，直到现在我有时不得不看这个问题。因此oncomplete，在 ajax 调用中，我获取了返回给我的信息，并将其推送到状态。我的要求是：如果我从页面 A 导航到页面 B，然后在页面 B 上，我执行导致 DOM 操作的 ajax 请求的数量（让调用每个导致 DOM 操作的 ajax 请求 a state）。如果我点击后退按钮，我应该回到页面 A，如果我点击前进按钮，我应该回到页面 B，我处于最后的状态。

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

4

3 回答 3

5

你需要做的如下：

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

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

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

查看我的这个答案可能很有用，这只是关于您使用pushStates. 当然，这不完全是您想要的，但是它的编写更简单一些，并且与此答案中的信息一起，它应该可以为您提供所需的行为。

于 2013-05-03T10:04:55.627 回答
3

我看到您正在使用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
});
于 2013-04-23T14:35:56.507 回答
2

还，

relpaceState 将始终擦除 B 状态。

用于pushStateA 和 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 
});

祝你好运

于 2013-05-04T13:18:52.750 回答