PHP Ajax动态列表的后退操作——保存列表内容和点击位置

最新推荐文章于 2021-05-06 15:35:28 发布

sbdx

最新推荐文章于 2021-05-06 15:35:28 发布

阅读量554

点赞数

分类专栏： Ajax PHP 文章标签： ajax php

本文链接：https://blog.csdn.net/sbdx/article/details/77836339

版权

PHP 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

需求

列表页是ajax动态加载的，每次点击进入查看后返回，会丢失之前的位置，并且列表需要重新加载一次。

思路

绑定点击事件，点击的时候获取当前位置和列表HTML，存入sessionStorage。
后退的时候要判断是否从前一个页面返回的，这里就用到 **history.replaceState**

代码

//绑定事件
$('#list a').live('click',function(e){
    history.replaceState({}, document.title, location.href+"&history=-1");//写入标志位
    var _scrollTop = $("body").scrollTop();
    var _bodyHeight = $("body").height();
    sessionStorage.setItem('list',$('#list').html());
    sessionStorage.setItem('scrolltop',_scrollTop);
    sessionStorage.setItem('bodyheight ',_bodyHeight);
});

if(window.location.search.indexOf('history=-1') > 0)//检测标志位
{
    $('#list').html(sessionStorage.getItem('list'));
    $("body").height(sessionStorage.getItem('bodyheight'));
    $("body").scrollTop(sessionStorage.getItem('scrolltop'));
    history.replaceState({}, document.title, location.href.replace('&history=-1',''));//还原真实路径
}
else
{
    //不是后退的则加载
    ajaxdata(1);
}