移动端部分浏览器返回页面不刷新问题解决方案

假设这样的场景：A页面和B页面，A页面下一步跳转到B页面，B页面上我们做了一些数据的修改和保存，此时点击上一步回到A页面，我们需要A页面的总价展示基于新数据。

一般情况下点击上一步我们需要调用history.back()或history.go(-1)，只是部分浏览器（目前测试涉及到的有华为P20、红米NOTE3、小米平板、oppoR9）在调用了这两个方法之后返回到上一个页面什么都不做，不会重新发起请求导致A页面上的价格不更新。目前有两种解决办法：

1. 返回上一步避免采用history.back()和history.go(-1)，而是使用location.href = 'xxx'来替代。若上一个页面的链接地址不固定，可以使用document.referrer,保险起见，使用的时候建议判断兼容性。具体如下：

if ('referrer' in document) {
     window.location.href = document.referrer;
}
复制代码

2. 通过history对象提供的pushState方法，具体如下：

// 点击下一步的时候，调用pushState
window.history.pushState({
    isRefresh: true,
}, '', window.location.href);

// 返回当前页面的时候，判断state中的内容，需要的时候强制刷新页面
if (window.history.state && window.history.state.isRefresh) {
  window.history.replaceState({
    isRefresh: false,
  }, '', window.location.href);
  window.location.reload();
}
复制代码

使用第二种方法会有个问题，由于我们更改了history对象，点击浏览器的返回按钮会额外增加一次点击。

转载于:https://juejin.im/post/5ccfaa456fb9a0322415ad1f