HTML5 历史API: 不能多次倒退

Question

我一直在努力让我的脚本正常工作，但显然它有问题：当我尝试使用浏览器后退按钮向后退时，它在第一页向后停止，即我第二次单击后退时按钮，无法正常工作，而是用自身更新当前页面。

例子：首页 -> 第二页 -> 第三页 -> 第二页 -> 第二页 -> 第二页（依此类推）

首页->第二页->第三页->第四页->第三页->第三页（依此类推）

这反而有效：首页 -> 第二页 -> 首页

有人知道我遗漏了什么吗？

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

Answer 1

当您按下后退按钮时，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;
    });

希望对您有所帮助。

HTML5 历史API: 不能多次倒退

HTML5 history API: cannot go backwards more than once

html

javascript

html5-history