安卓微信浏览器或者webview中window.reload()失效 vue项目中

2019年12月5日
| 没有评论

window.location.reload() 在H5下正常，在webview和腾讯X5内核无效，

let search = location.search;      if (search && search.indexOf('?') > -1) {        search += ('&random=' + new Date().getTime());      } else {        search += ('?random=' + new Date().getTime());      }      location.replace(location.origin + location.pathname + search + location.hash);

最近发现安卓系统在微信浏览器和webview里不支持window.location.reload() 和 window.location.href 

场景：
//无效代码
let old_url = wwwe.baidu.com?lang=en; // 当前url
let new_url = www.baidu.com?lang=zh; // 目标url
window.location.href = new_url;
window.location.reload()
解决:
发现虽然 href 被设为 new_url，但是reload()一直无法执行。网上的方法是在url后加一串时间参数。即将例子中的第三行改写成 

window.location.href = new_url + '?time='+((new Date()).getTime());
这个方法可以成功解决安卓在微信里无法reload的问题。安卓手机对微信浏览器进行缓存是根据根路由http://baidu.com/a/b的形式来缓存的，即如果微信浏览器缓存过www.baidu.com?lang=en 和 www.baidu.com?lang=zh后，reload默认是从缓存中装载文档，而不会刷新重新渲染整个页面。所以这个时候加时间戳就可以避免被浏览器判断为之前缓存过的页面。

封装了一个方法，如果url已经有时间戳，就只更新时间戳，否则则加上time参数（参数名可以自定义）

function refreshUrl(url,param){
let key= (param || 'time') +'='; //默认是"time"
let reg=new RegExp(key+'\d+'); //正则：time=1472286066028
let timestamp=+new Date();
if(url.indexOf(key)>-1){ //有时间戳，直接更新
console.log('(reg,key+timestamp)',url.replace(reg,key+timestamp));
return url.replace(reg,key+timestamp);
}else{ //没有时间戳，加上时间戳
if(url.indexOf('?lang')>-1){
let urlArr=url.split('?lang=');
if(urlArr[1]){
return urlArr[0]+'?lang='+urlArr[1]+'&'+key+timestamp;
}else{
return urlArr[0]+'?'+key+timestamp;
}
}else{
return url+'?'+key+timestamp;
}
}
}
又一天坑解决：
后来在app里调用webview，发现webview里上述方法reload页面无效。网上查了一遍发现没有说这个问题的。固推测webview的缓存原则是判断 ? 参数前的路由路径，所以导致无法刷新。对于开头的例子，去掉？后的参数，那么url就都是www.baidu.com，所以webview会判断为同一路径，不会reload。

暴力解决： 博主用的react hash路由，固直接在hash前加时间戳就可以解决

const { href } = window.location;

const router = href.split('#/')[1];

const newUrl = /?lang=${index}#/${router}
 
————————————————
版权声明：本文为CSDN博主「要做前端的一股清流」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_31915745/article/details/88749334

js