无法弄清楚历史JS

Question

我正在尝试实现到我的 ajax 控制站点的导航，但我遇到了一些奇怪的错误。

我正在使用 History JS，HTML5 唯一版本。

我是这样初始化的：

function initializeHistory() {

    var History = window.History;
    if ( !History.enabled ) {
        console.log("Not enabled!");
        return false;
    }

    // Changing the main page state to -1.
    History.replaceState({id:-1}, baseTitle, baseUrl);

    // Bind to StateChange Event
    History.Adapter.bind(window,'statechange',function(){
        var State = History.getState();
        console.log(History.savedStates);
        if (historyData.manualStateChange)
        {
            if (State.data.id=='-1') alert('History start');
            historyData.allowHistoryPushPop=false;
            var gotoState=historyData.data[State.data.id];
            var currentState=historyData.currentNavigation;

            /* Some code here to revert to the previous state */

            historyData.allowHistoryPushPop=true;
      }

      History.log(State.data, State.title, State.url);
   });
};

我正在使用一个名为 historyData 的全局对象，我在其中存储了以下内容：

var historyData={
    data:                   new Array(), //an array which contains objects that refer to the data that needs to be shown, when back or forward button is pushed
    manualStateChange:      true, //using this to figure out if the back or forward button was pressed in the browser, or if I am adding or removing a state from History programmatically
    allowHistoryPushPop:    true, //using this to prevent history from being changed in certain situations
    currentNavigation:      {
        page:   'dashboard',
        pageid: null,
        module: null,
        moduleid: null
    }, // stores the current object from the historyData.data array
    status: true // boolean that enables or disables History on my page
}

每当我点击页面中的 link 时，一个名为导航的函数就会触发，它会更改历史记录的状态，并最终运行一系列函数来显示用户请求的页面.导航功能的相关部分如下：

function navigation(gotofunc, navData) {
    if ((historyData.allowHistoryPushPop) && (historyData.status))
    {
        if (navData['urlData']==null) // if this is null, then the title and the url for the asked page, will be returned by the server, after an ajax call, so we set it to the current url and current title
        {
            var curState=History.getState();
            urlData={
                title:  curState.title,
                url:    curState.url
            };
        } else {
            urlData=navData['urlData'];
            if (!urlData['title']) urlData['title']=curState.title;
            if (!urlData['url']) urlData['url']=curState.url;
        }
        navData['parameters']=new Array();
        if (arguments.length>2) for (i=2;i<arguments.length ;i++) navData['parameters'].push(arguments[i]);
        historyData.manualStateChange=false; // we are making a programmatic change, so we don't want the binded 'statechange' to fire
        historyData.data.push(navData); // store the history data in our own array
        History.pushState({id:historyData.data.length-1}, urlData['title'], urlData['url']); // push the History state, and set it's id to point to our newly added array element
        historyData.manualStateChange=true; // re-enable the manual state change
    }
}

如果我事先不知道在通过 ajax 获取数据后 URL 会是什么，我的 Ajax 调用会用正确的数据替换当前状态, 这样:

if ((dataArray['navDat']) && (historyData.status))
        {
            historyData.manualStateChange=false;
            var State = History.getState();
            History.replaceState(State.data, dataArray['navDat']['title'], dataArray['navDat']['url']);
            historyData.manualStateChange=true;
        }

这在大多数情况下工作正常。如果我向前浏览几页，然后向后退，一切都很好，如果我再次前进（全部通过使用浏览器的后退和前进按钮），效果很好。只有一个例外：如果我加载页面，加载子页面，然后尝试单击后退按钮，这一行永远不会触发：

   if (State.data.id=='-1') alert('History start');

当我只向前导航一页时，它基本上不会弄清楚我回到了首页。

另一件奇怪的事情如下（也许这也是我原来问题的原因）：我尝试获取 History 对象的 savedStates，看看发生了什么，奇怪的是，当我使用 replaceState 事件时，它在 savedStates 中添加了一个新状态。添加的对象之一具有正确的数据 ID，另一个具有先前的数据 ID。

可能是什么原因导致了这个问题，是不是我的脚本哪里有错误？或者这是完全正常的？（replaceState后History.savedStates添加多个对象的部分）

提前感谢您的帮助！

Answer 1

如果我用第一个 replaceState 替换 url 或页面标题，当我 return 到首页时程序会意识到，我不知道为什么，但直到那时这是我能想到的最佳解决方案。

无法弄清楚历史JS

Can't figure out History JS

javascript

jquery

history.js

html5-history