html5微信拍照后自动刷新,微信内置浏览器物理返回不刷新问题
问题描述与需求
非单页面应用;
在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面;
在页面A,通过get方式进入页面B之后再回到页面A,这个时候所有版本的微信在页面A上数据没有更新 ---> 需要更新数据;
分析与提出问题
问题一. 通过后端同事查看访问日志发现,所有版本上的微信页面返回数据不更新是因为发生Ajax缓存。最后自己在chrome_6494_1.html' target='_blank'>Chrome 上查看发现:
屏幕快照 2017-07-23 上午10.53.19.png
disk cache: 原始资源被存储在本地磁盘上
问题二. iOS版微信自带浏览器物理返回没有重新请求页面的原因:Page Cache/Back-Forward Cache
解释:
Firefox称之为bfcache,webkit称之为Page Cache,Opera称之为Fast History Navigation。这里的cache不是HTTP规范里的cache,不是disk cache中的cache(原始资源被存储在本地磁盘上),也不是传统的memory cache中的cache(Webkit把解码后的资源保存在内存中以在多个网页之间共享)。
因为不是HTTP中的cache,所以在header中设置no-store和no-cache是行不通的;
具体解释见《JavaScript高级程序设计》第393页;
解决问题思路
问题一:
在发起Ajax请求时,在请求链接上加时间戳作为参数,以欺骗浏览器,使得每次请求数据的链接都不一样,这样Ajax就不会缓存了(参考第1个文档,具体见下图);
屏幕快照 2017-07-23 下午1.16.23.png
问题二尝试方法:
Web缓存:在HTML页面中的标签里,no-store和no-cache首部可以禁止缓存对响应进行复制(见参考文档第2条第1个回答)如:
错误原因:
1. 标签在HTML5中失效;
2. HTTP response header优先级高于HTML meta tag;
3. HTML meta tag只在查看本地文件文件时用到;
页面链接加时间戳(见参考文档第1个)
history.replaceState({}, "todo", location.pathname+'?time='+(+new Date()));
虽然每次进入这个页面的时间戳都不一样,但是还是不行。
错误原因:未找到
监听返回操作并刷新页面(见参考文档第3个):
componentDidMount() {
window.addEventListener('hashchange', () => {
window.history.replaceState('hasHash', '', '');
}, false);
window.addEventListener('popstate', () => {
window.location.reload();
}, false);
}
componentWillUnmount() {
window.removeEventListener('hashchange');
window.removeEventListener('popstate');
}
错误原因:未找到
搞清楚是Page Cache/BF Cache的原因之后,监听pageshow事件
注意:这个方法无法解决返回时发生的Ajax缓存,因为Ajax缓存是disk cache
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
Bingo!
根据《JavaScript高级程序设计》第394页的说明,指定onunload事件不会执行bfcache,那么可以执行以下代码:
或者
window.onunload = function(){};
但不可行,原因未知。
总结
搞清楚问题的原因是最重要的,知道了原因就好解决问题了;
用博客方式记录自己的思路过程是一个不错的方式;
《JavaScript高级程序设计》是一本神奇的书,需要好好反复研读;
标签: 微信
顶一下
(0)
0%
踩一下
(0)
0%
html5微信拍照后自动刷新,微信内置浏览器物理返回不刷新问题相关推荐
- 手机 html5 返回 页面不刷新,微信自带浏览器物理返回不刷新问题
问题描述与需求 非单页面应用: 在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面: 在页面 ...
- html5微信拍照后自动刷新,html5 调用微信jssdk 没有调用相机,只显示最近的图片文件。...
如图所示,点击调用后 代码如下: ...mapActions([ 'shellGetImageAndUpload', ]), // 调用shell/xx 微信.企业微信等选择图片.上传.识别拿到数据, ...
- html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 微信android返回上一页位置,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- weixin公众号页面返回上一层_《解决微信内置浏览器返回上一页强制刷新问题方法》...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 微信html开发返回刷新页面,解决微信内置浏览器返回上一页强制刷新问题方法...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- window客户端-微信内置浏览器-公众号H5-打开白屏
原文链接:https://dsx2016.com/?p=1154 公众号:大师兄2016 问题场景 在window上客户端微信打开公众号H5网页,内置浏览器白屏 一些基本的关联 上一个版本是可以正常登 ...
- 调试微信 PC 端的内置浏览器界面
2021-08-03 最新更新 好久没看,微信也更新了好几版.下面的方法并没有失效,不过上了 3.3.x 后的微信版本已经禁用了右键和查看 chrome://version 的功能了.进过实测,最后一 ...
- 微信内置浏览器使用DevTools实现自动顶帖脚本
接<豆瓣自动顶帖机器人JS脚本>这篇,对于仅能在微信内置浏览器中正常打开或使用的网页,不能使用开发者工具,不能使用Tampermonkey插件.例如微赞的广州租房论坛微信版http://w ...
最新文章
- 使用tab键分割的文章能快速转换成表格。( )_无需按空格键,就能将Word文字对齐,3种方法了解一下...
- Java 的工厂方法及代理模式
- file watchers怎么默认打开_python默认字典defaultdict进阶
- 聚类(3)-- Gaussian Mixtures Model
- 初识主成分分析 (PCA)
- 【CF643D】Bearish Fanpages(set)(模拟)
- 网站源码 HTML和源代码有什么区别?他俩是什么关系?
- 敏捷开发与Scrum区别(敏捷开发(Agile)教程)
- Python中的文件路径
- JavaScript处理json数据(对象,数组,集合)
- 1.3.随机变量,随机向量的自相关与自协方差
- c语言中void *的使用
- java 删除文件失败_java中File的delete()方法删除文件失败的原因
- Linux学习-ps显示进程信息
- Matlab进行彩色图像直方图匹配(不用histeq函数)
- TIPTOP ERP 用户密码修改
- Cocos2d-x之Mouse鼠标事件
- 【科创人独家】搜狐快站金庸:有情有义,90后技术创业者的问剑之路
- 039分数计算器程序
- 2019年计算机类专业保研经历(清华软院、中科院计算所、中科院软件所、南大计算机、清华深圳)
热门文章
- python网络爬虫-复杂HTML解析
- Live800:企业必修课|新时代的全渠道营销解析(下)
- 直角三角形 纪中 1385 数学_斜率
- 串口转以太网服务器原理,【干货】自制低成本串口转以太网网关
- 必火CTF闯关(1)
- 搞笑--为毛我顶多是个包工头
- 【.net函数式编程】可重复的执行repeatable execution
- 如何把计算机课讲得生动些,谈小学阶段如何上好计算机课(5页)-原创力文档...
- 海思芯片中VPSS的group和channel的概念.
- PC端浏览器兼容性问题解决方案