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

[Aether]

和这破事儿逗逼了三天，试过各种办法，包括而不限于 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 中的上一页概念）。

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

我更新一下。。。发现随机数会导致分享 SDK 的签名失效（一脸懵逼）

这是35天后的一个更新（第一个 APPEND 是昨天，这是第二个）

现在我去掉了随机数，因为必须保证微信分享 SDK 验证过关，而我不想在本地 JS 做校验（其实是懒得改/也没有必要每次刷新都做一次）。 我现在的做法：

1、统一跳转到一个 backstep.html 的模板页面 2、backstep 写入本地 localStorage，值为希望回退的步数（比如2或者3） 3、然后通过 location.replace 将一个目标页面刷新：

比如：

localStorage.setItem("back2steps", "{{backsteps|default(2)}}");
location.replace("{{url}}")

4、在新的页面，读取 localStorage 并且将其重置为空 5、如果读取到 localStorage 数字，那么将 history 调回 N 步，这个时候因为此页面已经在当前刷新过了，所以看上去就是刷新过的。

例如：

window.onpageshow = function(){
	detectBackStes = parseInt(localStorage.getItem("back2steps"));
	if(detectBackStes>0){
		localStorage.setItem("back2steps", "");
		window.scrollTo(0,1)
		history.go(-detectBackStes);
	}
}

以上，非常脏的做法，用户可能会有轻微的闪烁感（如果页面很轻则可能感觉不出来）。 但至少实现了我现在想要的部分目标。

我还是应该实际些。。。考虑去开 VUEJS 技能点 T_T

[jininij]

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

[DreGD]

同加过随机数

[DreGD]

依稀记得是 200 from cache 而不是 304

[leohxj]

浏览器有一个机制叫做 Back-Forward Cache ： https://developer.mozilla.org/en-US/docs/Working_with_BFCache
不知道是否有帮助。

[nosun]

按照楼主的方案，试了下，没成功，返回之后页面没强制刷新，能看到 url 上退回去的时候随机数变了。

怎么破，就是想在使用手机的后退按钮返回时，需要强制刷新页面。否则页面是空白的。

[Aether]

@nosun 什么系统？什么浏览器？微信版本号？手机的后退按钮要比程序回退应该要简单些，你测试一下 onpageshow 部分？

[nosun]

安卓 6.0 微信 6.3.32 ， 浏览器不知道怎么看

[nosun]

我这边是在微信中嵌入了一个 web 页面，中间是 ajax 加载了一些数据，现在后退了， ajax 那部分不响应，主要是这个问题，试过 ajax + 时间戳， cache 设置为 false 都不管用。手动刷新一下就可以。在微信的模拟器中也是这样。

[nosun]

嗯，我再看看