HTML5 History API初始加载问题

HTML5 History API initial load issue

本文关键字：加载 问题 History API HTML5      更新时间：2023-09-26

我试图在页面首次加载时存储第一页信息。这样我就可以在点击第二页时检索到第一页的信息。

(Initial Page -> Page2 -> Initial Page)

经过几个小时的工作，我决定存储一个名为firstLoad的全局变量，并使用replaceState代替pushState。现在起作用了。但有一个问题，它不能像这样:

Initial Page -> Page2 -> Page3 -> Page2

当第3页返回到第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>

问题出在这段代码中。

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

如果我们在窗口上检查MDN页面。我们发现state事件属性是传递给pushState等函数的状态对象。

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

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

我认为你实际上想在你的popstate处理程序中使用document.location。

$(window).on('popstate', function(e){
    loadContent(document.location);
});
相关文章：