微信支付后返回到前画面不会刷新的问题解决

---
title: 微信支付后返回到前画面不会刷新的问题解决
date: 2018-12-27 10:13:23
categories: 微信公众号
tags:
- 问题
- history
- back
- type
- 解决
- 微信
- 微信公众号
- 强制
- location
- 微信支付
- window
- reload
- 刷新
- 返回
- false
- event
- 前画面
- 商品
- 浏览器
- onpageshow
- persisted
- performance
- navigation
---

今天微信公众号里的商城里，遇到一个问题让用户的体验很不好。就是在商品详细画面，如果没有支付，里面的视频是不能看的，支付后才能看。但是现在点击微信支付，成功后点Ok返回到商品详细画面时，还是不能直接看视频，非得退出这个页面后再进就可以。

原因是微信支付成功后是用的history.back()方式来返回的前画面，这种方式和直接在浏览器上点后退按钮是一样的效果，是不会刷新前画面的，导致前画面购买没有反应过来。

百度后发现回退也是可以强制刷新画面的。说是用onpageshow，里面用if (event.persisted）来判断是否回退，但是我用这个方法测试了，发现onpageshow这个方法是可以进来的，但是问题是不管是否为回退，event.persisted总是为false，所以永远不会执行window.location.reload();

这就有点尴尬了，继续百度后，终于找到了正确写法，并测试通过。具体代码如下：

// 返回时强制刷新
window.onpageshow = function(event) {

    if (event.persisted || window.performance &&
        window.performance.navigation.type == 2)
    {
        window.location.reload();
    }

};