微信内置浏览器点击浏览器「返回」后不执行js脚本
最近遇到一个很奇葩的问题
同一套代码,部署在测试和生产两套服务上
测试环境 一台ECS 域名直接进ECS的NGINX
生产环境 域名进SLB,SLB打到两台生产ECS上进NGINX
进入H5落地页后会跳转去授权,再重定向回H5落地页,这时候会产生路由history。也就是说浏览器的「返回」按钮会亮起可点击。
测试环境没有任何问题,但是生产出了幺蛾子
这时点击浏览器的「返回」按钮,出现了白屏,查看network发现落地页html 从磁盘读取,外联script和css 都正常获取并且也是从磁盘读取。但是读取完外联js文件后却不知行js脚本,导致SPA页面完全白屏。
baidu & google了半天,查到临时解决方案
在index.html内添加如下代码:
var isPageHide = false;
window.addEventListener("pageshow", function(e){
console.log('window.pageshow: ', e)
if (isPageHide) {
location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
原因猜测:
猜测引发的原因为BF Cache(back-forward Cache)所造成的问题,
当我打开Network调试器时,勾选「停用缓存」,则不会引发此问题。
困惑:
如果真是因为BF Cache造成的问题,为什么测试环境正常,唯独生产环境会有这个问题???
难道是说因为生产环境是通过SLB分流打到ECS上的,所以在这个环节有什么设置上的不同???