微信网页返回到前一列表的历史位置(解决方案)/兼容苹果
来源:互联网 发布:访客网络连不上 编辑:程序博客网 时间:2024/06/05 11:17
这段时间php遇不到什么大的问题,后端的改动也不大,反而是公司的前端开发出了点小问题,这两天,我就针对如何恢复微信网页的历史列表页面做了下实验和探讨,好了,说完废话,就开始吧。
场景:在微信公众号中开发微信商城时,经常会遇到如下所示商品列表页面:
而这些页面的数据都是通过ajax请求得到,在点击跳转离开页面后,再进行返回操作,结果发现该页面的数据重新加载了,这就导致了不好的用户体验(因为正常应该是返回到上次 的历史位置的)。
于是乎,我就开始百度,百度,,,,然后,再谷歌。。。结果答案基本上都是指向一个:
运用框架建立自己的路由机制,用ajax请求页面并缓存,换句话说,做成单页应用将完美的解决这个问题。
但是呢,项目进行到这个时候,整个项目基本上每个页面都有自己独立的js和css,如果进行整合的话,那花费的力气实在太大了,,而且考虑到也只有这个页面需要完成历史回退,我专门针对这个页面做处理不就可以了吗?
于是,我就另辟蹊径。思考了下,这种历史恢复,不就是和我们学汇编时,调用函数时“保留现场和恢复现场“的场景相类似吗?好的,那用什么保留现场呢?现场有什么东西需要保留呢?又怎样恢复现场呢?
问题1:现场需要保留什么数据?
(1)页面的一些显示信息,以上图为例,就是保留关键字和排序方式等信息。
(2)页面滚动时的滚动高度(一时间忘记了专业术语了)。
问题2:用什么保留现场数据呢?
答:当然不能用js和html标签来保存了,应该用缓存,那h5的前端缓存形式有cookie,localstorage,sessionstorage;区别如下:
(1)cookie存储最大4k的数据,每次随http请求一起发送,浪费带宽;
(2)localstorage最大存储容量达2M/5M,保存在浏览器内置的sqlite中,以键值对的形式给上层调用,生命周期无限;
(3)sessionStorage基本参数和用法和localstaorage相同,唯一的不同就是在浏览器关闭后结束生命周期;
那么对于我们所需的场景,使用localstorage和sessionStorage都是可以的。
问题3:怎样恢复现场呢?
答:直接从缓存中读取数据,将相关数据进行恢复即可。
OK,知道怎么恢复历史,但是如何找准时机恢复呢?
location.hash = '#back_flag'; //离开页面时锚点做标记 localStorage.corp_history_len = history.length; //页面需要重新加载时记住当前历史长度//通过这个来判断是否返回,已经兼容苹果(苹果返回时会自动刷新,该问题以解决) if(history.length>localStorage.corp_history_len && (location.hash && (location.hash.indexOf('#back_flag')!=-1))){ }else{ //重新加载页面 }//每次进入页面消除锚点location.hash = "";
这次我使用了localstorage,但后面想了下,用sessionstorage更合理,因为网页窗口关闭后,这些数据也就没用了,用sessionstorage的话就能被自动回收了。
that is all, 记录完毕。
待解决问题:
(1)加上锚点后,使用history.go(-1)将会没法回到上一个页面,原因是go(-1)会回到没有锚点(#符号)所对应的url。
- 微信网页返回到前一列表的历史位置(解决方案)/兼容苹果
- 返回历史浏览位置
- Ueditor图片上传不能兼容微信浏览器的解决方案
- //兼容苹果手机的SDK微信上传图片 下载到服务器
- 微信开发 调取相机兼容苹果手机
- 苹果操作系统的历史
- 返回顶部效果jquery(位置兼容IE6)
- 自己开发的网页在跳转至微信公众号文章后,点击微信的返回,无法返回原网页
- 自己开发的网页在跳转至微信公众号文章后,点击微信的返回,无法返回原网页
- 微信浏览器自带的返回上一页的停留位置 scrollTop
- PHP微信开发---根据用户回复的关键词和位置,返回附近的信息
- 微信浏览器自带的返回上一页的停留位置
- 微信返回上一页停留在上次点击的位置
- 微信公众平台的发展历史
- 详情页返回列表页时保持原来的位置
- Calendar 显示是否是 今天 本周 本月 本年 (应用于微信 QQ 显示历史聊天列表 时间显示)
- Scrapy框架结合Spynner采集需进行js,ajax动态加载的网页并提取网页信息(以采集微信公众号文章列表为例)
- Scrapy框架结合Spynner采集需进行js,ajax动态加载的网页并提取网页信息(以采集微信公众号文章列表为例)
- Java中的泛型
- 驱动程序调测方法与技巧
- tjut 4876
- 5742 ( It's All In The Mind )
- Git自学之路(二)- Git初始配置和基本使用
- 微信网页返回到前一列表的历史位置(解决方案)/兼容苹果
- RXJava学习记录
- UVA 11076 Add Again
- HotSpot VM GC 的种类
- 多控制器之间的跳转
- Android--自定义对话框--AlertDialog
- 杭电OJ 5742 It's All In The Mind
- CentOS 6.8开机自动联网
- 关于 Html5 的地理位置定位功能试验