避免缓存,为所有css、js加版本号
2017-09-04 18:11
309 查看
近日遇到有客户反应,页面打开显示不正常,不能完全的显示出页面。细问之下才得知,原来是有一个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>
效果图:
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>
相关文章推荐
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 在js或css后加?v= 版本号不让浏览器缓存
- gulpfile.js自动化解决js、css缓存问题(添加版本号)
- 前端静态资源版本与缓存(通过gulp在js和css后面添加版本号)
- HTML页面自动清理js、css文件的缓存(自动添加版本号)
- 在js或css后加?v= 版本号不让浏览器缓存
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 怎么避免浏览器缓存静态文件(js/css/img)
- 前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
- 部署项目避免本地js、css缓存
- 上线项目更新版本后如何避免客户端js和css缓存
- Web项目发布 采用gulp压缩 JS CSS CSHTML ASPX HTML Image 给JS CSS自动添加版本号 强制浏览器刷新缓存
- HTML中css和js链接中的版本号【.htaccess 缓存】
- 在js或css后加?v= 版本号不让浏览器缓存
- HTML中css和js链接中的版本号(刷新缓存)
- 禁止静态文件缓存的方法,可用于JS与CSS文件上
- Ajax清除浏览器js、css、图片缓存的方法
- ASP.net解决CSS与JS的缓存问题
- tomcat服务器下,html5下应用程序缓存(缓存js或css或图片)