html防替换资源,html前端进行资源重载及刷新资源

最近开发webview嵌套开发&＃xff0c;遇到资源重载的问题&＃xff0c;具体表现在&＃xff1a;css缓存强硬&＃xff0c;js缓存强硬&＃xff0c;无法事实更新静态资源&＃xff0c;但若是禁止页面使用缓存策略的话&＃xff0c;对服务器的占用比就会提高&＃xff0c;访问少的时候&＃xff0c;还好&＃xff0c;访问量几何上升时&＃xff0c;服务器就GG了。

经过多方查找发现除去glup&＃xff0c;webpack&＃xff0c;node&＃xff0c;以及服务器做资源版本之外&＃xff0c;并没有一个简单省事的方法&＃xff0c;但项目时单纯的html页面&＃xff0c;并没有什么框架使用&＃xff0c;如若使用打包方式增加版本号更新缓存的话&＃xff0c;相比较会麻烦一些&＃xff0c;所以自己扣置了个小玩意。

由于script标签更新src之后并不会资源重载&＃xff0c;所以使用了标签重新插入&＃xff0c;link标签在更新href之后&＃xff0c;资源会重新进行加载&＃xff0c;所以直接替换路径

废话不多说&＃xff0c;直接上代码&＃xff1a;

function EditionFn (edition){

if(edition.notUrl){

edition.notUrl &＃61; edition.notUrl.split(",")

}else{

edition.notUrl &＃61; ["///"]

}

edition.notHtml &＃61; edition.notHtml || "///";

edition.isHtml &＃61; edition.isHtml || location.pathname;

if(location.pathname.indexOf(edition.notHtml) > -1 && location.pathname.indexOf(edition.isHtml) <0){

return false

}

var COOKIE &＃61; document.COOKIE

COOKIE &＃61; COOKIE.split(";")

COOKIE.forEach(function(item){

item &＃61; item.replace(/\s*/g, "")

var thistime &＃61; item.split("&＃61;");

COOKIE[thistime[0]]&＃61; thistime[1]

})

function loadJS(script){

var src &＃61; script;

var script_dom &＃61; document.createElement(&＃39;script&＃39;);

script_dom.src &＃61; src;

script_dom.language &＃61; &＃39;Javascript&＃39;;

script_dom.type &＃61; &＃39;text/Javascript&＃39;;

var head &＃61; document.getElementsByTagName(&＃39;head&＃39;).item(0);

head.appendChild(script_dom);

}

var scrUrl &＃61; [];

$(&＃39;script&＃39;).each(function(){

if($(this).attr("charset") &＃61;&＃61; "utf-8" && $(this).attr("src") && COOKIE.edition && COOKIE.edition !&＃61; edition.edition){

var src &＃61; $(this).attr("src")&＃43; &＃39;?v&＃61;&＃39; &＃43; edition.edition;

scrUrl.push(src)

$(this).attr("src","");

}

})

if(scrUrl.length > 0){

scrUrl.forEach(function(item){

var thisType &＃61; true;

edition.notUrl.forEach(function(items){

if(item.indexOf(items) > -1){

thisType &＃61; false;

}

})

if(thisType){

loadJS(item)

}

})

}

$(&＃39;link&＃39;).each(function(){

if($(this).attr("type") &＃61;&＃61; "text/css" && $(this).attr("href") && COOKIE.edition && COOKIE.edition !&＃61; edition.edition){

var src &＃61; $(this).attr("href")&＃43; &＃39;?v&＃61;&＃39; &＃43; edition.edition;

var thisType &＃61; true;

edition.notUrl.forEach(function(items){

if(src.indexOf(items) > -1){

thisType &＃61; false;

}

})

if(thisType){

$(this).attr("href",src)

}

}

})

var times &＃61; new Date().getTime() &＃43; 7*24*60*60*1000;

if(COOKIE.edition && COOKIE.edition !&＃61; edition.edition){

document.COOKIE &＃61; "edition&＃61;"&＃43;edition.edition&＃43;"; expires&＃61;"&＃43;new Date(times)&＃43;";" ;

}else{

document.COOKIE &＃61; "edition&＃61;"&＃43;edition.edition&＃43;"; expires&＃61;"&＃43;new Date(times)&＃43;";";

}

}

调用如下&＃xff1a;

EditionFn({

edition:edition,

notUrl:"base64.js",

notHtml: &＃39;///&＃39;,

isHtml: "cssAndjsSession"

})

代表参数如下&＃xff1a;

edition: 版本号

notUrl&＃xff1a;不重载更新资源&＃xff0c;默认为空

notHtml&＃xff1a;不重载更新路径&＃xff0c;默认为空

isHtml&＃xff1a;重载更新指定页面(目前只能指定单个页面&＃xff0c;要想多个页面自己去改代码吧)&＃xff0c;默认所有页面都会更新

第一次请求时&＃xff0c;不会资源重载&＃xff0c;只有版本号不符时&＃xff0c;会进行资源重载

欢迎各位指教一二