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

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

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

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

废话不多说，直接上代码：

function EditionFn (edition){

if(edition.notUrl){

edition.notUrl = edition.notUrl.split(",")

}else{

edition.notUrl = ["///"]

}

edition.notHtml = edition.notHtml || "///";

edition.isHtml = edition.isHtml || location.pathname;

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

return false

}

var cookie = document.cookie

cookie = cookie.split(";")

cookie.forEach(function(item){

item = item.replace(/\s*/g, "")

var thistime = item.split("=");

cookie[thistime[0]]= thistime[1]

})

function loadJS(script){

var src = script;

var script_dom = document.createElement('script');

script_dom.src = src;

script_dom.language = 'javascript';

script_dom.type = 'text/javascript';

var head = document.getElementsByTagName('head').item(0);

head.appendChild(script_dom);

}

var scrUrl = [];

$('script').each(function(){

if($(this).attr("charset") == "utf-8" && $(this).attr("src") && cookie.edition && cookie.edition != edition.edition){

var src = $(this).attr("src")+ '?v=' + edition.edition;

scrUrl.push(src)

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

}

})

if(scrUrl.length > 0){

scrUrl.forEach(function(item){

var thisType = true;

edition.notUrl.forEach(function(items){

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

thisType = false;

}

})

if(thisType){

loadJS(item)

}

})

}

$('link').each(function(){

if($(this).attr("type") == "text/css" && $(this).attr("href") && cookie.edition && cookie.edition != edition.edition){

var src = $(this).attr("href")+ '?v=' + edition.edition;

var thisType = true;

edition.notUrl.forEach(function(items){

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

thisType = false;

}

})

if(thisType){

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

}

}

})

var times = new Date().getTime() + 7*24*60*60*1000;

if(cookie.edition && cookie.edition != edition.edition){

document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";" ;

}else{

document.cookie = "edition="+edition.edition+"; expires="+new Date(times)+";";

}

}

调用如下：

EditionFn({

edition:edition,

notUrl:"base64.js",

notHtml: '///',

isHtml: "cssAndjsSession"

})

代表参数如下：

edition: 版本号

notUrl：不重载更新资源，默认为空

notHtml：不重载更新路径，默认为空

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

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

欢迎各位指教一二