后退按钮不记得 Chrome 中的 AJAX 内容位置

Question

我正在使用 AJAX 在此页面上动态加载人才内容：www.icon.pha-group.com 它使用分页来浏览内容。我的问题是在谷歌浏览器中不记得你所在的分页页面。因此，如果我在内容的第 2 页，单击一个项目，然后返回，它会返回到第 1 页。有什么方法可以修改此代码来解决问题吗？下面是 AJAX 函数：

        function get_posts($params) {

        $container = $('#container-async');
        $content   = $container.find('.content-ajax');
        $status    = $container.find('.status');

        $status.text('Fetching talent...');

        $.ajax({
                    //url: bobz.ajax_url,
                    url: "/wp-admin/admin-ajax.php",
                    data: {
                        action: 'do_filter_posts',
                    nonce: bobz.nonce,
                    params: $params
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function(data, textStatus, XMLHttpRequest) {

                        if (data.status === 200) {
                            $content.html(data.content);
                        }
                        else if (data.status === 201) {
                            $content.html(data.message);    
                        }
                        else {
                            $status.html(data.message);
                        }

                        //all done so call cycle script
                        script_cycle();

                        // window.location.hash = $this.closest('span').find('.current');
                        // console.log(window.location.hash);
                        //angular.bootstrap(document, ['lightbox']);



                 },
                 error: function(MLHttpRequest, textStatus, errorThrown) {

                $status.html(textStatus);

                /*console.log(MLHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);*/
                 },
            complete: function(data, textStatus) {

                msg = textStatus;

                if (textStatus === 'success') {
                    msg = data.responseJSON.found;
                }

                // $status.text('Posts found: ' + msg);
                $status.text('');

                /*console.log(data);
                console.log(textStatus);*/
            }
        });
    }

代码更新，分页如下：

function vb_ajax_pager( $query = null, $paged = 1 ) {

if (!$query)
    return;

$paginate = paginate_links([
    'base'      => '%_%',
    'type'      => 'array',
    'total'     => $query->max_num_pages,
    'format'    => '#page=%#%',
    'current'   => max( 1, $paged ),
    'prev_text' => 'Prev',
    'next_text' => 'Next'
]);

if ($query->max_num_pages > 1) : ?>
    <ul class="pagination">
        <?php foreach ( $paginate as $page ) :?>
            <li><?php echo $page; ?></li>
        <?php endforeach; ?>
    </ul>
<?php endif;

}

Answer 1

您可以在/从 javascript 本地存储变量中存储/获取所需的信息。 这样您就可以记住您所在的分页页面。

Answer 2

这是因为您在单击项目后不会更改 URL。

$('.youritemclicked').click(function() {
   location.hash($(this).attr('id'));
});

或者您可以简单地将您的项目包装在anchor 标签中：

<a href="#item2">
<!-- Your item body -->
</a>

重要

请确保您没有通过单击此项目设置preventDefault()

然后您可以在浏览器中返回和前进，因为现在您也保存了此项目的历史记录。

更新

if ($query->max_num_pages > 1) : ?>
    <ul class="pagination">
        <?php foreach ( $paginate as $page ) :?>
            <li><a href="#<?php echo $page->ID; ?>"><?php echo $page; ?></a></li>
        <?php endforeach; ?>
    </ul>
<?php endif;