16 1月 2023 •

微信内置浏览器点击浏览器「返回」后不执行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上的，所以在这个环节有什么设置上的不同？？？