浏览器后退和前进按钮不会使用history.js的statechange事件调用回调方法 [英] browser back and forward button does not invoke callback method with statechange event of history.js

问题描述

我用过（ https://github.com/browserstate/history.js ）和有一段这样的代码

I used (https://github.com/browserstate/history.js) and have a piece of code like this

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。请帮助

if I invoke manageHistory() after my ajax call, then History.Adapter.bind callback method get invoked correctly. However, if I click the browser back and then click forward button that result in page navigation from B to A, then A back to B, call back method inside History.Adapter.bind does not get invoked. This happen on both chrome and IE9. Anyone know how to fix this issue, I need to get the State after click browser back and then forward, to update my DOM. Please help

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

Note: I use version 1.7.1 jquery.history.js for html4 browser IE9

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

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

Sorry I was busy with other task, that not until now that I have sometimes to look at this issue. So oncomplete of an ajax call, I took that information that return to me, and push it into state. My requirement is: that if I navigate from page A to page B, and then on page B, I execute numbers of ajax requests that result in DOM manipulation (let call each ajax request that result in DOM manipulation a state). If I click the back button, I should go back to page A, and if I click the forward button, I should go to page B with the last state that I was in.

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

So my thought was, oncomplete of my ajax request, I would replace the last state in history with my current state (my json object is the html that I receive back from the ajax request). If I use push state, let say I am on page B, and I click one button, my page now change to aaa, I pushState aaa. Then if I click other button, my page now change to bbb, I pushState bbb. If I click the back button now, I would still be on page B, with my state in History.Adapter.bind(window, 'statechange', function() {}) show as aaa, if I click back button again, i would go to page A. I do not want this behavior. I want that if I am on page B with state bbb, and click back, I would go to page A, and if I click forward, I would go to page B with state bbb. I hope this make more sense. Please help

推荐答案

您需要做的事情如下：

• 如果您来自的页面是另一页（例如，您打开了第B页，而上一页是第A页），则执行 pushState 。


• 如果另一方面，前一页与您当前所在的页面相同，则只需执行 replaceState ，包含您当前状态信息的信息。

• If the page you came from is another page (e.g. you open page B and the previous page was page A) you do a pushState.
• If on the other hand the previous page was the same page as you're currently on you will simply do a replaceState, replacing the information with information about your current state.

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

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

This means that if you go from A to B (pushState) to new state of B (replaceState), back button (goes to state info of A) and next forward (goes to the newest state of B). Additionally if you open A the first time you need to do a replaceState with information about the state of A so that A will have some state at least (otherwise it will have an empty data object).

查看此答案 pushStates 构建一个有序历史堆栈的方式。当然不完全是你想要的，但它写得有点简单，再加上这个答案中的信息，你应该得到你想要的行为。

It might be useful to look at this answer of mine, which is simply about the way you would built an ordered history stack with pushStates. Not exactly what you want of course, but it's a bit simpler written and together with the information in this answer it should get you the behaviour you want.

这篇关于浏览器后退和前进按钮不会使用history.js的statechange事件调用回调方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！