iOS safari 后退 js 不执行的问题

今天偶遇一个问题:iOS 10 safari 浏览器中,后退后,页面 js 没有运行。
之前也遇到过这个问题,因为加入风控的代码,就好了。就没有深究。这次发现,风控的代码不好使了��。也可能是这次 iOS 版本问题,之前没有测试过 iOS 10 系统。
网上搜索之,整理方案如下:

window.onpageshow = function (e) {
  var isIos = function () {
    var ua = window.navigator.userAgent
    return /iphone|ipad|ipod/i.test(ua)
  }
  if (isIos() && e.persisted) {
    window.location.reload(true)
  }
}

简单来说,通过监听 pageshow 事件,判断 event.persisted 当前页面是否是读取缓存,来决定是否进行刷新。上面代码放置在公共 js 里,全站后退问题均可解决。
不过这样做有个小问题,页面先进行了后退,显示了历史数据,然后 js 执行了页面刷新,看到了浏览器进度条。由于服务器及网络原因,需要几秒时间。
这个刷新动作能不能优化呢?我认为还是有空间的。比如有的页面,明确就是需要刷新某一个接口数据即可。
那么我们可以对其进行调整,比如执行全局方法 historyBack,根据返回值来决定是否进行全页面刷新。


  // 页面代码
  var page = {
    getData: function() {
        var that = this;
        $.ajax({
            url: getInteGral,
            type: 'POST',
            dataType: 'json',
            beforeSend: function () {
                fm.showLoging();
            },
            success: function (data) {
                layer.closeAll();
                that.render(data)
            }
        }); 
    },
    render: function(data){
        console.log(data)
        if (data.code == 200) {
            vue.$data.isLogin = 1;
            vue.$data.phoneNum = data.msg.phone;
            vue.$data.my_integral = data.msg.my_integral;
        }else if(data.code == 201){
            // 未登录
            vue.$data.isLogin = 0;
        }else{
            vue.$data.isLogin = 1;
            fm.alert(data.msg)
        }
    },
    init: function(){ this.getData() }
  }

  window.historyBack = function() {
    page.getData()
    return false // 阻止全局刷新
  }


// 全局代码
window.onpageshow = function (e) {
    var isIos = function () {
      var ua = window.navigator.userAgent
      return /iphone|ipad|ipod/i.test(ua)
    }
    if (isIos() && e.persisted) {
      var cb = window.historyBack
      if(typeof cb === 'function') {
        if(cb()) {
          window.location.reload(true)        
        }
      } else {
        window.location.reload(true)
      }
    }else{
        page.init()
    }
  }

这样是我目前能想到的比较好的处理方法。可以全局配置默认强制刷新代码,每个页面也支持自定义刷新方案。代码量还不算太多。


 上一篇
Mac下的常用终端(terminal)命令总结 Mac下的常用终端(terminal)命令总结
无意间发现笔者的有道云笔记在曾几何时有一篇关于terminal命令的总结笔记。由于笔记记录内容实在太多,所以在这里简单整理了一些Mac下终端里常用且实用的命令方便日后查阅。 查看在终端里输入ls就可以查看文件和文件夹,但隐藏的文件就无法查看
下一篇 
Date.parse()方法在安卓和苹果手机上的不同表现 Date.parse()方法在安卓和苹果手机上的不同表现
经过手动测试得知: 安卓手机:会正常返回毫秒数,只要是符合要求的时间字符串即可,要求比较宽松。 苹果手机:会返回NaN。形如2018-07-24 23:17:43的时间字符串的格式不被支持,不符合标准。经过查阅资料得知: 语法://显式
  目录