safari返回后页面不刷新的解决问题

这几天在开发项目时，遇到的一个问题：

1.自己封装了按钮组件，文字有3个状态，点击前，点击中，点击后。

2.在购买商品页面，初始化了购买按钮，点击购买时，文字从‘购买’ -> ‘正在购买’ -> ‘购买成功’，再跳转到其他页面

3.点击浏览器的返回，在chrome里面按钮会重新渲染初始化，显示‘购买’；在safari中仍然显示‘购买成功’

初步认为safari的返回页面没有刷新，用的是缓存，所以就把safar的这个特性当做bug去解决：

解决方法很简单：使用正则表达式去判断当前浏览器，如果是safari，就给页面添加一个onpageshow事件，判断事件对象的persisted属性，如果是true就是从缓存中读取；不过有时persisted属性一直返回false，可以使用window.performance对象，这个对象上有有个navigation.type属性：

当前页面是通过点击链接，书签和表单提交，或者脚本操作，或者在url中直接输入地址，type值为0

点击刷新页面按钮或者通过Location.reload()方法显示的页面，type值为1

页面通过历史记录和前进后退访问时。type值为2

 

var browserRule = /^.*((iPhone)|(iPad)|(Safari))+.*$/;
if(broswerRule.test(navigator.userAgent)){
    window.onpageshow = function(e){
        if(e.persisted || (window.performance && window.performance.navigation.type == 2)){
            window.location.reload();
        }
    }
}