javascript - 修复加载更多分页样式时后退按钮问题

Question

HTML

<div class="moreButton">
        <a class="more" id="<?php echo htmlspecialchars($page);?>">More</a>
</div>

AJAX

$(function(){
    $('.more').live('click', function(){
        var page = $(this).attr('id');      //get the last id

        $.ajax({
            type    : 'GET',
            url     : 'functionality/js/paginate.php',
            data    : { page : page, per_page : per_page, last_page : last_page },
            beforeSend: function(){
                $('.more').html(img);
                if(history.pushState){
                   history.pushState(null, null, '#' + page);
                }else{
                   location.hash = '#' + page;
                }
            },
            success: function(data){
                $('.more').remove();
                $('.main-content').append(data);
            }
        });
    });
});

我实现了 load_more 样式的分页。这里的问题是无限滚动的常见问题，当用户单击帖子并使用后退按钮返回时，他/她应该获得之前加载的帖子数量，但仅加载初始帖子。我正在尝试根据我在谷歌搜索中发现的内容集成 history.pushState 功能，但似乎无法正常工作。我在这里缺少什么？

Answer 1

使用浏览器历史记录保存状态有两个关键部分。 pushState 函数允许您添加到历史堆栈(本质上就像进入新页面)。它还允许您将 javascript 对象存储为“状态”。当状态从堆栈中“弹出”时(例如按下浏览器的“后退”按钮)，这将派上用场。

浏览器会抛出一个 popstate 事件，您可以使用该事件来确定浏览器是否要返回到之前的状态。您可以通过 window.onpopstate 访问它。要监视哈希更改，您可以使用 window.onhashchange .

if ("onpopstate" in window) {
    window.onpopstate = function (event) {
        if (event.state && event.state.pageID) {
            fetchData(event.state.pageID);
        }
    };
}

if ("onhashchange" in window) {
    window.onhashchange = function () {
        if (location.hash) {
            fetchData(location.hash.substr(1));
        }
    };
}

function fetchData(pageID) {
    // Load some content
}

function saveState(pageID) {
    if (history.pushState) {
        history.pushState({ pageID: pageID }, null, "/page/" + pageID);
    } else {
        location.hash = pageID;
    }
}