微信浏览器返回上一页页面不刷新问题

问题场景：

一个页面用微信浏览器打开，跳转下一页之后返回上一页，页面不刷新。（该问题在ios端，微信开发工具及电脑的chrome浏览器手机模式都没有此问题）。

原因分析：借助vconsole 手机端测试工具看到，返回上一页时js文件没有被执行。于是猜测可能是浏览器内部机制导致：iOS为了提升浏览网页的效率，做了一个缓存机制。

解决办法踩坑：

尝试1：利用sessionStorage手动进行刷新，在跳转下一页之后给浏览器加个sessionstorage的缓存needRefresh = true ，返回上一页时根据值进行判断手动刷新。在第一页添加如下代码：

var needRefresh = window.sessionStorage.getItem('need-refresh');

if(needRefresh){

sessionStorage.removeItem("need-refresh");   

location.reload();

}

结果由于返回上一页不执行js代码，所以此段代码并将没有被执行。（有些帖子说返回上一页会关闭下一页的网页造成sessionstorage消失，ios并没有出现此问题，vconsole显示之前设置的needRefresh依然存在）尝试失败。

尝试2：监听浏览器的页面展示，手动刷新页面。

在需要刷新的页面添加如下代码：

window.addEventListener('pageshow', function () {

if (isPageHide) {

window.location.reload();

}

});

window.addEventListener('pagehide', function () {

isPageHide = true;

});

window.addEventLister监听事件起作用了，测试成功。

最后：端页面由于手机型号众多，运行也是千差万别，兼容性就比较头疼。这次手机端页面调试发现了一个很好用的手机端测试插件vConsole，搭建及测试都很方便。