HTML5歷史記錄API初始加載問題

Question

我正在嘗試在頁面首次加載時存儲第一頁信息。 因此，當我單擊第二頁時，可以檢索到第一頁的信息。

（ Initial Page -> Page2 -> Initial Page)

經過數小時的工作，我決定存儲一個名為firstLoad的全局變量，並使用replaceState而不是pushState 。 現在可以使用了。 但是有一個問題，它不可能像這樣：

Initial Page -> Page2 -> Page3 -> Page2

當第3頁回到第2頁時 ，控制台顯示：

GET http://localhost/[object%20Object] 404 (Not Found) 

我已經過Google編輯，但是我找不到適合該問題的任何適當的教程，其中大多數建議使用history.js，但我想首先了解它的工作原理。 任何幫助，將不勝感激！

<script>
$(function(){
    var firstLoad = 1;

    $('a').on('click', function(e){ 
        e.preventDefault();
        var path = this.href;
        var currentPath = window.location.pathname;
        loadContent(path);

        if(firstLoad==1){
            console.log(firstLoad);
            console.log(currentPath);
            firstLoad=0;
            history.replaceState(currentPath, '', '');
            history.pushState({},'',path);
        }else{
            console.log('Not first load')
            history.pushState(path,'',path);
        }
    });

    //Pop State
    $(window).on('popstate', function(e){
        var state = e.originalEvent.state;
        if(e.originalEvent && state){
            loadContent(state);
        }
    });

    //Load Content
    function loadContent(path){
        $.get(path, function(data){
            $('#result').html(data);
        });
    };

});
</script>

Answer 1

問題在這部分代碼中。

$(window).on('popstate', function(e){
    var state = e.originalEvent.state;
    if(e.originalEvent && state){
        loadContent(state);
    }
});

如果檢查Window.onpopstate的MDN頁面，則會發現state事件屬性是傳遞給諸如pushState函數的狀態對象。

popstate事件的state屬性包含歷史記錄條目的state對象的副本。

這意味着jQuery事件對象屬性e.originalEvent.state是您在pushState上傳遞的對象。 您可以使用該對象存儲數據，但是您的loadContent函數需要URL的字符串，而不是對象。

我認為您實際上想在popstate處理程序中使用document.location 。

$(window).on('popstate', function(e){
    loadContent(document.location);
});