iOS8 hash路由模式下页面循环reload解决方案

问题描述

h5页面在设置路由模式为hash时，iOS8设备打开页面会反复刷新。

详情请参考：issue - H5 hash路由模式下，iOS8页面加载无限reload

问题定位

1. 在uniapp h5相关源码中搜索reload方法的调用，打log，确认到具体代码
2. 查看源码发现是用了vue-router来稍加改造
3. 提出问题：为什么别的机器不会反复刷新
4. 了解popstate事件触发的逻辑：某些版本的浏览器内核会在页面加载完成后触发一次popstate事件，参考MDN文档
5. 确认是页面加载完成后自动触发popstate，导致uniapp误处理触发页面reload

hack解决

解决思路：hack reload方法，识别该次异常的reload（load，popstate，reload短时间内连续触发），忽略该次reload。

相关代码：直接写入html文件即可，目前项目内就是这样解决

<script>  
  // @NOTE 处理uniapp路由bug，load，popstate，reload短时间内依次触发时，忽略这次reload  
  var reloadHackRecord = {};  
  window.addEventListener('load', function(e) {  
    reloadHackRecord.load = new Date().getTime();  
  });  
  var onPopState = function() {  
    reloadHackRecord.popstate = new Date().getTime();  
    window.removeEventListener('popstate', onPopState);  
  }  
  window.addEventListener('popstate', onPopState);  
  var oldReload = window.location.reload;  
  window.location.reload = function() {  
    var load = reloadHackRecord.load;  
    var popstate = reloadHackRecord.popstate;  
    var reload = new Date().getTime();  
    var margin = 100; // 经验值  
    if (load && popstate && reload && reload > popstate && popstate > load && reload - popstate < margin && popstate - load < margin) {  
      window.location.reload = oldReload;  
      // @TODO 可以上报看看有多少量  
      return;  
    }  
  }  
</script>

更多信息

今天升级到最新版本，新建模板项目来验证，依然存在问题

路由模式使用history没有该问题