HTML5历史API：不能走回头路不止一次(HTML5 history API: cannot go

我一直在试图让我的脚本工作，但显然有什么不对的地方：当我尝试用浏览器后退按钮倒退，它停靠在第一页向后，即第二次我点击后退按钮，不工作正确，而是与自身更新当前页面。

实例：主页 - >第二页 - >第三页 - >第二页 - >第二页 - >第二页（等等）

主页 - >第二页 - >第三页 - >第四页 - >第三PAGE->第三页（等）

这不是工作：首页 - >第二页 - >主页

有没有人有一个线索，我缺少的是什么？

var domain = 'http://example.com/';

function updatePage(json){
    var postData = JSON.parse(json);

    // pushState 
    var url = domain + postData.url;
    var title = postData.title;
    document.title = title;
    history.pushState({"page": url}, title, url);

    // Clears some elements and fills them with the new content
    // ...

    // Creates an 'a' element that triggers AJAX for the next post
    var a = document.createElement('a');
    a.innerHTML = postData.next;
    a.href = domain + postData.next;
    document.getElementById('container').appendChild( a );
    listenerAttacher( a );

    // Creates another 'a' element that triggers AJAX for the previous post
    a = document.createElement('a');
    a.innerHTML = postData.previous;
    a.href = domain + postData.previous;
    document.getElementById('container').appendChild( a );
    listenerAttacher( a );
}


function loadPost( resource ){
    // Loads post data through AJAX using a custom function
    loadHTML( resource, function(){
        updatePage( this.responseText );
    });
}

function listenerAttacher( element ){
    // Adds a click listener to an element. 
    element.addEventListener('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        loadPost( this.href +'.json' );
        return false;
    }, 
    false);
}


(function(){
    history.replaceState({'page': window.location.href}, null, window.location.href);

    // Adds the event listener to all elements that require it.
    var titles = document.querySelectorAll('.post-title');
    for (var i = 0; i < titles.length; i++){
        listenerAttacher( titles[i] );
    }

    // Adds a popstate listener
    window.addEventListener('popstate', function(e){
        if ( e.state == null || e.state.page == domain ){
            window.location = domain;

        }
        else {
            loadPost( e.state.page + '.json' );
        }
    }, false);
})();

当你按下后退按钮， popstate事件被触发， loadPost函数被调用。然而，在loadPost ， history.pushState方法再次被调用，这再次推动历史堆栈上的当前页面。这也解释了为什么第一次返回按钮的作品，然后它没有。

1）速战速决是检查如果当前状态相匹配你试图把状态：

if (!history.state || history.state.page!=url)
    history.pushState({ "page": url }, title, url);

2）活动更好，你可以添加参数loadPost和updatePage功能，以防止不必要的pushState调用：

function updatePage(json, disablePushState) {
    ...
    // disablePushState is true when back button is pressed
    // undefined otherwise
    if (!disablePushState)  
        history.pushState({ "page": url }, title, url);
    ...
}


function loadPost(resource, disablePushState) {
    // Loads post data through AJAX using a custom function
    loadHTML(resource, function (responseText) {
        updatePage(responseText, disablePushState);
    });
}

    ...
    window.addEventListener('popstate', function (e) {
        if (e.state == null || e.state.page == domain) {
            window.location = domain;
        }
        else {
            loadPost(e.state.page + '.json', true);
        }
        return true;
    });

希望这有助于。