我们知道微信浏览器默认是会缓存css、js等文件缓存策略未知,通常我们给文件名后面加一个版本号来解决缓存问题。
不过由于网络原因、js文件经常会下载错误,而下载错误的文件还是会被微信客户端缓存,结果就是用户不管怎么重新打开页面,js都是异常的,由此我们想到了在加载js之后接着判断js是否加载成功如果加载失败了就给这个js文件加个版本号再加载一次以加载JQuery为例子,加载JQuery判断window.$是否存在如果不存在再往dom插入一个带随机版本号的script标签
由于我们用的是tp所以我在function.php里加了个方法来封装加载js的方法:
/*js加载器*/
/*解决由于网络原因js加载错误之后被客户端缓存的问题*/
/*js如果加载失败直接重新发起请求不经过缓存*/
/*
* $src js路径
* $tag 判断js加载是否成功的依据
* $ver js文件版本号
* */
function JsHelper($src,$tag,$ver){
$ret= "<script src='".$src."?ver=".$ver."'></script>\n";
$ret.="<script>\n";
$ret.="if(typeof(".$tag.")=='undefined')\n";
$ret.="{\n";
$src.="?ver=".rand(1,9999999);
$ret.="document.write(unescape('%3Cscript src=\"$src \" %3E%3C/script%3E'));";
$ret.="}\n";
$ret.="</script>";
return $ret;
}
?>
需要加载js文件的时候在模板里面这样调用:
{#:JsHelper("/Public/js/out/common.js","jQuery",$ver)#}
用这种方法能够解决绝大部分由于js加载错并被缓存误导致的问题