手机 html5 返回 页面不刷新,微信自带浏览器物理返回不刷新问题
问题描述与需求
非单页面应用;
在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面;
在页面A,通过get方式进入页面B之后再回到页面A,这个时候所有版本的微信在页面A上数据没有更新 ---> 需要更新数据;
分析与提出问题
问题一. 通过后端同事查看访问日志发现,所有版本上的微信页面返回数据不更新是因为发生Ajax缓存。最后自己在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高级程序设计》是一本神奇的书,需要好好反复研读;
手机 html5 返回 页面不刷新,微信自带浏览器物理返回不刷新问题相关推荐
- html5微信拍照后自动刷新,微信内置浏览器物理返回不刷新问题
问题描述与需求 非单页面应用: 在页面A,通过get方式进入页面B之后再回到页面A,这个时候微信iOS版页面不刷新,安卓版微信刷新页面 ---> 所有物理返回都必须强制刷新重新进入页面: 在页面 ...
- php 206实现微信浏览器,PHP实现限制页面只能在微信自带浏览器访问的代码
PHP实现限制页面只能在微信自带浏览器访问的代码 发布于 2015-02-15 11:58:02 | 142 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hype ...
- php设置只能在微信打开,PHP如何限制页面只能在微信自带浏览器访问?
限制程序只能在微信里面浏览,下面是PHP限制页面只能在微信自带浏览器访问的代码. 为了防止自己辛辛苦苦做的webapp被人copy,都想限制程序只能在微信里面浏览,虽然下面实现了这个功能,单都是小菜, ...
- html5 微信返回按钮,《解决微信内置浏览器返回上一页强制刷新问题方法》(示例代码)...
微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的 ...
- 微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo
微信自带浏览器被输入法阻挡文本框的 jQuery 解决方法 by FungLeo 前言 做好了项目之后,在各种浏览器里面测试,都没有问题.很高兴,交付后端使用.然而发现在微信自带浏览器里面,却是出现了 ...
- 关于移动端页面开发(微信内置浏览器)总结
上个礼拜,刚入职就接到一个移动端的活动页面项目,重点还是要兼容微信浏览器,兼容主流机型.在这之前,我所做的都是PC端的,想来两者差别不大,实际动手时遇到的坑还是蛮多的.时间过去的有点久,我也不能把每个 ...
- PC端微信自带浏览器网页跳转授权页面空白问题
手机微信授权正常的,但PC微信用自带浏览器打开网页的时候空白,经过多次尝试,发现原来是授权地址的参数顺序问题.因为项目是单页面应用,由于微信授权时会自动去掉"#"后的内容,所以当时 ...
- 微信自带浏览器环境内左上角返回、关闭按钮事件监控
#意思大概是修改历史栈,把给当前页的url加'#www.hetun99.cn',返回的时候就会重新去请求页面了 <script src="https://apps.bdimg.com/ ...
- 判断当前页面是否在微信内置浏览器中打开
转: 任何浏览器的判断都是获取user-agent参数进行判断的,判断当前页面是否在微信浏览器中打开同样也不例外. 1.首先需要获取微信内置浏览器的User Agent,经过对微信的浏览器的检测,它的 ...
最新文章
- mysql中的主从复制slave-skip-errors参数使用方法
- 成功解决TypeError: only integer scalar arrays can be converted to a scalar index
- elasticsearch-6.0.1安装
- LeetCode 1470. 重新排列数组
- 看美国如何实现农业大数据的建设
- hdu 3062 Party(2-sat,3级)
- 开放防火墙/26ip段_在5个不同国家/地区采用开放硬件设计的电子产品
- matlab2014b下载 32位,matlab 2014b 32位
- JAVA 下载Word文档
- matlab从mp4文件中提取音频,如何提取mp4视频中的音频文件 将视频转换为MP3音频...
- 无线鼠标指针乱跑一种解决方案
- 计算机控制pwm,如何制作自制脉宽调制(PWM)电机控制电路
- 网易首支AI歌曲《醒来》发布:声音太逼真 能瞒过人类
- linux 清除dns缓存
- 【VHDL】随机存储器RAM、只读存储器ROM
- 官场直升机 鸿蒙笔著,担当:老衲笔尖无墨水,要从空处想鸿蒙
- vue的生命周期函数有哪些
- 【PC】完美解决 office2010 错误1920 未能启动服务 “Office Software Protection Platform”(osppsvc)
- 学术文献翻译改写 F36(含心得)
- w7系统显示rpc服务器不可用,教你win7系统rpc服务器不可用怎么办