javascript - 浏览器后退和前进按钮不使用 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。我不希望出现这种情况。我希望如果我在状态为 bbb 的页面 B 上，然后单击后退，我将转到页面 A，如果我单击前进，我将转到状态为 bbb 的页面 B。 .我希望这更有意义。请帮忙

Answer 1

你需要做的事情如下:

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

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

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

查看 this answer 可能会有用我的，这只是关于使用 pushStates 构建有序历史堆栈的方式。当然不完全是您想要的，但它的编写要简单一些，再加上这个答案中的信息，它应该能让您获得想要的行为。