微信浏览器开发，后退时强制刷新的解决方案

和这破事儿逗逼了三天，试过各种办法，包括而不限于 onpopstate/onpageshow/onload ，也试过本地数据缓存读写，还用过 AJAX 更新，都可耻地失败了——很神奇的是，在 Andorid 和微信自家的模拟器上都有效果，唯独在 iOS 的浏览器上失败。

我想要的很简单，就是当 Javascript 调用 history.back() 或者 history.go(-1) 时，微信浏览器可以自动刷新前面调用过的历史页面。而在 iOS 的微信上，唯独 location='' location.href='' history.go(0) 这几句就是死活无效。

最后被逼无赖，解决方案还是要靠 URL 上的随机数，也就是在当前打开的页面添加随机数：

var rnumber = Math.floor(Math.random()*1000)
history.replaceState({mod: rnumber}, 'Title', '?mod='+rnumber);

然后下一个页面调用 history.back() 回来的时候，这个代码会生成新的 URL ，从而强制微信判断为不同的页面，达到强制刷新的目的。

完成这个技术 hack 的目标是，在 Web page （纯页面，非 Web app ）的体系内，保持友好的「返回」体验，否则在页面上填写一个表单，点击提交以后，点击「返回」会返回填写表单的界面。虽然在逻辑上这里也没错，但是现在的体验都在向 APP 靠拢，故有此一折腾。。。

细节描述：
1 、在当前 view 添加随机值，可以动态判断，仅对编辑者有效：
var rnumber = Math.floor(Math.random()*1000)
history.replaceState({mod: rnumber}, 'Title', '?mod='+rnumber);

2 、用户点击进入编辑页面（无变化）

3 、在 POST 后的编辑页面输出
history.go(-2)
将浏览历史回退

4 、前述的第一个页面会因为 javascript 的原因生成新的随机 URL ，导致微信浏览器识别为新的资源而强制刷新，从而加载编辑后的新内容。

5 、此时用户点击左上角「返回」，会按原路返回「上一级」（而不是 Web page 中的上一页概念）。

此方案在我手边的环境里测试有效（但不能担保对所有特别是对安卓全阵营有效）。
网上没找到特别明确的解决方案，所以这里特别记录分享一下，也许会对其他朋友有用。

jininij

2016-11-22 00:25:56 +08:00

之前也被这问题困扰了一整天，最后不得不以一个特别变态的方法实现:用 js 拦截所有 a 跳转，并复写 window.location 。如果页面试图跳转，就往 localStorage 里记录一下，再主动去跳转。然后用定时循环不断检查 localStorage 。
写回复的时候突然又想到一个方法，页面到后台后， setTimeout 会被暂停，而微信的页面只能现实一个窗口，所以针对其他多窗口的浏览器，页面不在活动页面时 setTimeout 优化不会发生在微信上。这一点也可以用来 hack 一下。