Question

我尝试在首次加载页面时存储第一页信息。这样当我点击第二页时，我就可以找回第一页信息。

（Initial Page -> Page2 -> Initial Page)

经过几个小时的工作，我决定存储一个名为 firstLoad 的全局变量，并使用 replaceState 而不是 pushState 。它现在有效。但是有一个问题，它不可能是这样的：

Initial Page -> Page2 -> Page3 -> Page2

当返回第2页时，控制台会显示：

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

我已经谷歌了，但我找不到任何适当的教程来处理这个问题，他们中的大多数建议使用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);
    }
});

如果我们检查MDN page on Window.onpopstate，我们发现state事件属性是传递给pushState等函数的状态对象。

popstate事件的state属性包含历史记录条目state对象的副本。

这意味着jQuery事件对象属性e.originalEvent.state是您在pushState上传递的对象。您可以使用此对象存储数据，但您的loadContent函数需要URL的字符串，而不是对象。

我认为您确实希望在document.location处理程序中使用popstate。

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

HTML5 History API初始加载问题

1 个答案: