解决动态生成的网页在微信浏览器中每次返回都会重新生成的问题
来源:互联网 发布:linux 防火墙 编辑:程序博客网 时间:2024/06/06 03:58
解决动态网页在微信浏览器中每次返回都会重新加载的问题
前言
假设我们我们有一个搜索结果列表页面,其内容为我们通过 AJAX 从后端动态获取的。搜索页面中的每一个条目是一个超链接,我们可以点击超链接去请求另一个网页查看条目详情。这是一种很常见的情况。可是在微信浏览器,我们会遇到这样一个问题:当我们想从条目详情返回条目列表页面时,微信浏览器会重新刷新条目列表页面,我们会找不到刚才浏览的位置,又要重新滚动,上滑加载,等等等等,过了好久才能找到刚才浏览的位置,继续浏览。
这个问题的本质原因是微信浏览器的后退功能并不会保存网页快照,而是简单粗暴的重新加载网页。
这是一个很影响用户体验的问题。有解决办法吗?
当然有,最好的解决办法就是做一个 SPA 单页应用来实现。但是如果我们的网页已经存在,再重新成单页应用会增加很多工作量怎么办呢?这篇文章将介绍通过缓存来实现记录原有位置的功能。
思路
既然微信浏览器的后退功能我们无法修改,那我们的思路可以是自己保存网页的信息,当我们重新加载时先进行判断,判断本地是否有缓存的网页信息,如果有,则读取网页信息,将网页复原的原位置。如果没有,则像之前那样向后台发送 AJAX 来获取数据。
这样我们将大问题分解成了这几个小问题
如果缓存数据
什么时候缓存数据
缓存哪些数据
如何判断复原网页
如何缓存数据
我这里的想法是使用 LocalStorge 来存储数据。 LocalStorge 只能存储字符串数据,如果我们的数据不是字符串,我们可以将其转换为 JSON 格式在存储。
// data 是我们要缓存的数据localStorge.setItem('listData', JSON.strinify(data))
什么时候缓存参数
我这里的想法是在我们点击查看商品详情之前,先进行缓存,然后进行跳转。这时我们就不能使用 <a href="xxx">
了,而要使用 window.location.href
来做跳转
// .list-item 是我们点击跳转的列表条目let item = document.getElementByClassName('.list-item')item.addEventListener('click', function () { localStorge.setItem('listData', JSON.strinify(data)) window.loaction.href = 'xxx'})
缓存哪些数据
我这里的想法是要缓存从后端获取的全部数据,key值(我这里是搜索关键字),滚动位置,如果我们是按页码加载的话还要缓存页码位置以便回到列表页浏览后继续加载。
let item = document.getElementByClassName('.list-item')item.addEventListener('click', function () { var data = { data: response, // 从后台获取的数据 key: key scrollTop: document.body.scrollTop, page: page } localStorge.setItem('listData', JSON.strinify(data)) window.loaction.href = 'xxx'})
如何判断复原网页
关于如何判断数据这个就比较业务化了,大体思路还是按照key进行判断。复原网页就比较简单了,判断通过之后,将data数据渲染到 HTML 上,将滚动距离重新赋值给 document.body.scrollTop
即可。
如果判断不通过则可以通过如下方式删除缓存,然后重新获取数据即可。
localStorge.removeItem('listData')
- 解决动态生成的网页在微信浏览器中每次返回都会重新生成的问题
- 在shiro当设置sessionIdCookie配置的domain和访问url不匹配时,每次请求都会重新生成session
- 静态注册的广播每次接收广播都会重新生成一个接收广播的对象
- c# 中对于每次修改的程序 都必须重新手动生成 才能编译的问题
- u3d关于system.data每次在vs上重新加载都会丢失引用的问题
- 解决动态代码创建控件,每次到对应类都会创建控件的问题
- [转]在网页中动态的生成一个gif图片
- 在网页中动态的生成一个gif图片
- [C#]在网页中动态的生成一个gif图片
- 在网页中动态的生成一个gif图片
- 在网页中动态的生成一个图片
- 在网页中动态的生成一个gif图片
- 在 ASP.NET 网页中显示动态生成的图片
- 解决每次打开IE9都会在收藏夹栏出现“建议网站”的问题
- Android中生成.bat文件,解决每次打新包的烦恼
- 记录我的Express-session每次请求都重新生成session的问题
- 在2003中调用动态生成的radiobuttonlist的问题
- htmlunit爬取Ajax动态生成的网页获取不到生成后的结果的问题的解决
- xml复习
- 浏览器发起网络请求及优化
- Unity 中的 Mesh 及绘制圆环
- Android实现控制第三方音乐播放器暂停/播放
- Perfect Number
- 解决动态生成的网页在微信浏览器中每次返回都会重新生成的问题
- Java-JDBC调用批处理、存储过程、事务
- dagger2使用入门详解(一)
- 系统吞吐量几个重要参数:QPS(TPS)、并发数、响应时间
- C++作业六
- 小型的员工管理系统-SSM-04
- 数据库的创建与管理存储过程
- 常见对象-字符串的遍历
- 使用OpenCL+OpenCV实现图像旋转(一)