简单解决ios返回时页面不刷新的几种方法(h5页面返回h5页面)


一:监听 visibilitychange 事件,当页面显示时就再请求一次数据

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
var isAndroid = u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1 //android

document.addEventListener("visibilitychange", function () { console.log(‘visibilityState:‘, document.visibilityState) if (document.visibilityState == ‘visible‘) { isIOS ? app.init() : "" } })

二:window.performance.navigation 页面刷新判断

if (window.performance.navigation.type === 0/* 正常访问 */) {
  // 你要干的事
} else if (window.performance.navigation.type === 1/* 刷新 */) {
  // 你要干的事
} else if (window.performance.navigation.type === 2/* 返回 */) {
  alert("我返回了")
  // 你要干的事
} else {
  // 其他你要干的事
}

三:每次返回页面就刷新一次页面,这是最简单的方法,但是每次都是刷新页面而不是重新请求数据,用户体验不是最佳。

if (isIOS) {
  window.onpageshow = function (e) {
    if (e.persisted) {
      window.location.reload()
    }
  }
}

四:从B页面返回A页面时通过url传递一个参数到A页面,A页面拿到这个参数再请求一次数据,笨办法但是有效

//B页面
window.location.href = "/s/ss/sss/ssssss?isIOS=" + 1
//A页面截取url地址的参数值函数
getQueryString: function (name) {
      var reg = new RegExp(‘(^|&)‘ + name + ‘=([^&]*)(&|$)‘, ‘i‘);
      var r = location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      }
      return null;
},

creted () {
    ((this.getQueryString("isIOS")==1) && isIOS) ? this.init() : ""
}

 

 

简单解决ios返回时页面不刷新的几种方法(h5页面返回h5页面)

上一篇:Photoshop打造漂亮的青色水晶雪花按钮


下一篇:Photoshop 可爱的闹钟图标