在vue中动态插入/删除外部js文件
2021-03-22 本文已影响0人
phoebe__liu
1.动态插入js文件
function loadJS( url, callback ){
let script = document.createElement('script'),
fn = callback || function(){};
script.type = 'text/javascript';
//IE
if(script.readyState){
script.onreadystatechange = function(){
if( script.readyState == 'loaded' || script.readyState == 'complete' ){
script.onreadystatechange = null;
fn();
}
};
}else{
//其他浏览器
script.onload = ()=>{
fn();
};
script.onerror=()=>{
console.log("加载错误");
fn();
}
}
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
}
2.动态删除js文件
function removejscssfile(filename,filetype){
var targetelement=(filetype=="js")? "script" :(filetype=="css")? "link" : "none"
var targetattr=(filetype=="js")?"src" : (filetype=="css")? "href" :"none"
var allsuspects=document.getElementsByTagName(targetelement)
for (var i=allsuspects.length; i>=0;i--){
if (allsuspects[i] &&allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
allsuspects[i].parentNode.removeChild(allsuspects[i])
}
}
注意
动态删除js文件后,已经加载到浏览器的代码还是会运行,
实现删除需要指明两个节点,一个是要删除的节点,一个是被删除节点的父节点。使用“removeChild”方法可以实现删除。