最近工作业务上需要开发扫码打开网页来查看一些宣传资料的功能,二维码一旦生成就固定了,不会不停变动。开发过程中发现一个很严重的缓存问题。具体表现是:(苹果手机最为明显)
1.第一次扫码打开页面。
2.开发人员修改了一些内容重新发布了这个网页。
3.关掉刚才的网页第二次扫码打开。会发现看到的内容还是第一次看到的,此时刷新一下页面才会看到新的内容。
4.关掉页面第三次扫码打开,what?看到的还是第一次的页面内容,此时依旧是刷新下才会看到新的内容。
拿同事的小米手机又试了一下 上述123步操作与现象全部与苹果一致。第四步时扫码打开看到的就是新页面了。
这个页面内容发生变动在实际投入使用的时候 几乎不会发生。作为宣传产品和推广产品使用的东西,在发出去之前肯定后把数据检查好录入好才会投入使用。但是这个缓存问题还是要解决掉。
最终的解决方案:
生成二维码的网址不要带任何随机参数,这个参数我们在打开页面的时候给他拼上去。
例如网址:http://123.123.1.11:8088/index.html
在index.html页面里
function 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;
}
var random = GetQueryString('random'); // 获取路径中的的参数random
if (!random) { // 首次打开时是没有random参数的,所以接下来地址加上参数,然后重新加载,重新加载时已经又random了就不会再执行这里了。
location.replace(location.pathname + '?random=' + Math.random());
setTimeout(function () {
location.reload();
}, 300);
}