H5页面缓存问题的解决方法

H5页面缓存问题该如何解决？极悦小编来告诉大家。

场景：

扫描二维码进入H5页面，开发更新过H5页面后此时的页面并不是最新的，需要刷新一下才能更新

解决方法

1.给地址添加一个随机参数，避免缓存

如：

先定义一个方法，获取获取路径中的随机参数

GetQueryString(name){ //获取路径中的参数
	     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
	      var r = window.location.search.substr(1).match(reg);
	      if(r!=null)return decodeURI(r[2]); return null;
}

在onLoad/页面首次加载时调用，判断页面路径中是否有随机参数，没有的话加上随机参数，并重新加载，就不会有缓存了

onLoad() {
			var random = this.GetQueryString('random'); // 获取路径中的的参数random
			if (!random) { // 首次打开时是没有random参数的，所以接下来地址加上参数，然后重新加载，重新加载时已经又random了就不会再执行这里了。
			    location.replace(location.pathname + '?random=' + Math.random());
			    setTimeout(function () {
			        location.reload();
			    }, 300);
			}
		}

2.修改head块

  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">