在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”方法可以实现删除。

上一篇 下一篇

猜你喜欢

热点阅读