近日遇到有客户反应,页面打开显示不正常,不能完全的显示出页面。细问之下才得知,原来是有一个js文件修改了一个方法,但是上线后由于浏览器缓存的原因,还是加载的旧js文件,导致页面显示不正常了。给客户解释由于系统更新,需要强制刷新才可以。这天陆续又有客户反映遇到此问题,而有些客户由于对电脑了解的少,你说强制刷新他也不知怎么操作。思考是不是由网站自己解决此问题。先是考虑在页面引用的js文件后面加随机数来解决,但是考虑到该js文件引用频繁,如果每次都请求服务器,对服务器压力比较大,考虑着用版本号的方式在引用的时候实现,这样每次js文件有改变就更改版本号。如果js文件不改变,由于请求的还是原地址,这样就会从本地浏览器缓存中读取,而不会增加服务器负担。
效果图:
html:
<body>
<div class="banxin">
<textarea id="fileInput"></textarea>
<div class="btnBox"><input id="num" type="" class="vertical_center" name=""><button class="vertical_center">增加版本号</button></div>
<textarea id="fileOutput"></textarea>
</div>
</body>
js:
<script type="text/javascript">
$(function(){
var fileInput=$("#fileInput");
var fileOutput=$("#fileOutput");
var scr="script";
var num=$("#num");
$("button").on("click",function(){
var scriptStr="";
var cssStr="";
var fileInputText=fileInput.val().replace(/^\s+|\s+$/gm,'');
var scrArry=fileInputText.split("src");
var cssArry=fileInputText.split("href");
var newscrArry=[];
var newcssArry=[];
$.each(scrArry,function(index,ele){
if(ele.charAt(0)=="="){
newscrArry.push(ele.split('"')[1]);
}
});
$.each(cssArry,function(index,ele){
if(ele.charAt(0)=="="){
newcssArry.push(ele.split('"')[1]);
}
});
newscrArry=unique(newscrArry);
newcssArry=unique(newcssArry);
$.each(newscrArry,function(index,ele){
scriptStr+='<script type="text/javascript" src="'+ele+'?'+num.val()+'"></'+scr+'>'+ '\n';
});
$.each(newcssArry,function(index,ele){
cssStr+='<link rel="stylesheet" type="text/css" href="'+ele+'?'+num.val()+'"/>'+ '\n';
})
fileOutput.val(cssStr+scriptStr);
})
})
//数组去重
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
</script>