博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信浏览器返回上一页停留在原位置
阅读量:6875 次
发布时间:2019-06-26

本文共 1250 字,大约阅读时间需要 4 分钟。

hot3.png

微信浏览器中访问列表页面,点击详细页然后返回上一页,页面相当于重新刷新了,那么就不会停留在列表页面原来的位置了。而且列表页面又是ajax加载更多的效果。

看了一些解决文章,看起来有点复杂。但是还是要用HTML5的新属性来解决。

于是用了sessionStorage,在每次ajax加载的时候,保存已加载的列表HTML和scrollTop的位置,然后在页面每次刷新的时候,再还原原来的HTML和scrollTop的位置。

考虑到页面会有get筛选参数或者再次重新打开的可能,所以还要需要判断返回后的页面url 和上一次的页面url 是否一致,否则每次打开相同的页面都会使用sessionStorage已保存的HTML。如果ajax分页还需要考虑全局的分页参数。

这种解决方法没有改动服务器代码,只改进了前端的加载逻辑。

sessionStorage.setItem("list_ul", $("#list_ul").html());sessionStorage.setItem("top",document.body.scrollTop);sessionStorage.setItem("page",obj.page-1);sessionStorage.setItem("url",window.location.href);window.onload = function()  {      //返回上一页已浏览html和top位置    if(window.sessionStorage){          var top = parseInt(sessionStorage.getItem("top"));        top = top?top:0;        var product_ul = sessionStorage.getItem("list_ul");        var page = parseInt(sessionStorage.getItem("page"));        var url = sessionStorage.getItem("url");        //判断返回后的页面和上一次的页面地址是否一致        if(product_ul != null && url==window.location.href){            $('#list_ul').html(list_ul);            document.body.scrollTop = top + parseInt($(window).height());            obj.page = page;        }    }  };

以前以为微信浏览器不会缓存页面的图片,但是测试是缓存的。如果不缓存页面图片,那么页面打开就会很慢。

转载于:https://my.oschina.net/qingtianjun/blog/1329843

你可能感兴趣的文章
F.Cards with Numbers
查看>>
简单入门Buffer
查看>>
Paint House II
查看>>
测试评审清单
查看>>
字节流数据的写出(输出)和读取(输入)
查看>>
OO第四阶段总结
查看>>
javascript总结02
查看>>
创建windows服务
查看>>
KSQL日期字段访问
查看>>
HTML5 入门基础
查看>>
Laravel 中的 Many-To-Many
查看>>
Codeforces 371C Hamburgers(二分基础题)
查看>>
Page Layout里的javascript (jquery)不执行
查看>>
JS中的发布订阅模式
查看>>
springmvc自定义视图
查看>>
MFC串口的编程 mscomm控件与SerialPort类
查看>>
NSThread基础使用
查看>>
Codeforces Round #287 (Div. 2) ABCDE
查看>>
【转载】读懂IL代码就这么简单(二)
查看>>
09-JS的事件流的概念(重点)
查看>>