Question

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

我使用的是历史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
}

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

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或页面标题，程序会在返回首页时意识到，我不知道为什么，但在此之前这是我能想到的最佳解决方案。

无法弄清楚历史JS

1 个答案: