解决动态生成的网页在微信浏览器中每次返回都会重新生成的问题
2017-05-09 22:36
627 查看
解决动态网页在微信浏览器中每次返回都会重新加载的问题
前言
假设我们我们有一个搜索结果列表页面,其内容为我们通过 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')
相关文章推荐
- 解决H5页面浏览器返回或前进时ajax不能重新加载数据的问题
- 解决Ubuntu 10.10下Vmware每次打开都会重新编译加载模块的问题
- 《解决微信内置浏览器返回上一页强制刷新问题方法》
- 对于不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成问题的解决办法
- 对于不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成”问题的解决
- “对于不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成”问题的解决
- 对于“不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成”问题的解决
- 解决动态代码创建控件,每次到对应类都会创建控件的问题
- 使用sessionstorage解决微信网页返回保留原状态的问题
- 解决IOS微信内置浏览器返回后不执行js脚本的问题
- 解决微信内置浏览器返回上一页强制刷新问题方法
- 《解决微信内置浏览器返回上一页强制刷新问题方法》
- 对于“不返回任何键列信息的 SelectCommand 不支持 UpdateCommand 的动态 SQL 生成”问题的解决
- 解决ios上微信浏览器返回不刷新的问题
- htmlunit爬取Ajax动态生成的网页获取不到生成后的结果的问题的解决
- Vue 动态设置网站title 解决ios在微信浏览器中不生效问题
- 问题:在手动刷新aspx页面时,出现“不重新发送信息,则无法刷新网页。请单击“重试”,或单击“取消”返回正查看的页。”
- 使用php动态生成gif时遇到的问题和解决办法
- updatepanel中动态生成组件及绑定事件问题的解决
- 用动态CSS解决网页的大小字体问题~~论坛推荐~!!!