javascript - 无法弄清楚历史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
}

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

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

这在大多数情况下都可以正常工作。如果我向前导航几页，然后向后导航，一切都会很好地工作，如果我然后再次前进(全部通过使用浏览器的后退和前进按钮)，它会很好地工作。只有一个异常(exception):如果我加载页面，加载子页面，然后尝试单击后退按钮，这一行永远不会触发:

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

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

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

可能是什么原因导致了这个问题，我的脚本中是否有错误？或者这完全正常吗？ (replaceState后向History.savedStates添加多个对象的部分)

感谢您提前提供的帮助!

Answer 1

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