JS動態引入js,CSS——動態創建script/link/style標簽

借鑒；https://blog.csdn.net/songylwq/article/details/8505890

https://blog.csdn.net/xiangxiangw29/article/details/52460563

https://blog.csdn.net/qq_22855325/article/details/70926881

 

//動態向所有頁面添加模態框
function addModel(){
    var cssURL1 = '../../public/static/css/weui.min.css',cssURL2 = '../../public/static/css/jquery-weui.css';
    var scriptSrc1 = '../../public/static/js/jquery-1.11.2.min.js',scriptSrc2 = '../../public/static/js/jquery-weui.js';
    //創建連接
    this.createLink = function(URL,flag){ 
        var doc=document;  
        var name=URL.split('/')[URL.split('/').length-1];
        var tags=''
        var state =true;
        flag=='href'?tags=doc.getElementsByTagName('link'):tags=doc.getElementsByTagName('script');
        
        for(var i in tags){
            if(tags[i][flag]!=undefined && tags[i][flag].indexOf(name)!=-1){
                state=false
            }
        }
        
        var tagsFirst = tags[0],
        linkTag = null;
        if(!URL || !state){
          return false;
        }

        if(flag=='href'){
            var link=doc.createElement("link");  
            link.setAttribute("rel", "stylesheet");  
            link.setAttribute("type", "text/css");  
            link.setAttribute("href", URL);  
            tagsFirst.before(link); //在第一個link的前面追加
        }else{
            //添加需要的script
            doc.write("<script language='javascript' src="+URL+"></script>");
        }
       
    }
    
    //注意順序
    createLink(cssURL2,'href')
    createLink(cssURL1,'href')
    
    createLink(scriptSrc1,'src')
    createLink(scriptSrc2,'src')
    
    
    var maxModel = document.createElement("div");
    maxModel.style.cssText='position:fixed;width:100%;height:100%;top:0;bottom:0;left:0;right:0;z-index:2000;background:rgba(255,255,255,0);';
    //為這個節點添加點擊時間
    maxModel.addEventListener("click",function(ev){
         var oEvent = ev || event;
         //阻止事件冒泡
           oEvent.cancelBubble = true;
         oEvent.stopPropagation();
         
         $.confirm("您確定要下載App嗎？", "確定下載?", function(ev) {
            $.toast("app已經下載!");
        }, function() {
          //取消操作
        });
    },false);
    document.body.append(maxModel)
}

//window.onload=addModel();

 

 

//動態添加link標簽

function createLink(cssURL,lnkId,charset,media){ 
      var linkFirst = document.getElementsByTagName('link')[0],
      linkTag = null;
  
      if(!cssURL){
        return false;
      }
  
      linkTag = document.createElement('link');
      linkTag.setAttribute('id',(lnkId || 'dynamic-style'));
      linkTag.setAttribute('rel','stylesheet');
      linkTag.setAttribute('charset',(charset || 'utf-8'));
      linkTag.setAttribute('media',(media||'all'));
      linkTag.setAttribute('type','text/css');
      linkTag.href = cssURL; 
      
      linkFirst.before(linkTag); //在第一個link的前面追加
  }
  
  
  //動態向所有頁面添加模態框
  function addModel(){
      var cssURL1 = '../../public/static/css/weui.min.css';
      var cssURL2 = '../../public/static/css/jquery-weui.css';
      //注意順序
      createLink(cssURL2,'lnkId2')
      createLink(cssURL1,'lnkId1')
      //添加需要的script
      document.write("<script language='javascript' src='../../public/static/js/jquery-1.11.2.min.js'></script>");
      document.write("<script language='javascript' src='../../public/static/js/jquery-weui.js'></script>");
      var maxModel = document.createElement("div");
      maxModel.style.cssText='position:fixed;width:100%;height:100%;top:0;bottom:0;left:0;right:0;z-index:2000;background:rgba(255,255,255,0);';
      //為這個節點添加點擊時間
      maxModel.addEventListener("click",function(){
          $.confirm("您確定要下載App嗎？", "確定下載?", function() {
              $.toast("app已經下載!");
              }, function() {
              //取消操作
              });
          },false);
         document.body.append(maxModel)
    })
  }
  
  window.onload=addModel();

 

 

 

一.動態創建link方式

我們可以使用link的方式.如下代碼所示.

function addCssByLink(url){
    var doc=document;
    var link=doc.createElement("link");
    link.setAttribute("rel", "stylesheet");
    link.setAttribute("type", "text/css");
    link.setAttribute("href", url);

    var heads = doc.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(link);
    else
        doc.documentElement.appendChild(link);
}

 

二.動態創建style方式

但是,這樣的話,需要加載整個css文件,但是那樣有可能浪費一個http請求並占用一個服務器請求數,並等待上一段下載時間,所以,Firebug Lite采取的是將css代碼寫在js中,然后動態創建style標簽的方法,正如下面所示

function addCssByStyle(cssString){
    var doc=document;
    var style=doc.createElement("style");
    style.setAttribute("type", "text/css");

    if(style.styleSheet){// IE
        style.styleSheet.cssText = cssString;
    } else {// w3c
        var cssText = doc.createTextNode(cssString);
        style.appendChild(cssText);
    }

    var heads = doc.getElementsByTagName("head");
    if(heads.length)
        heads[0].appendChild(style);
    else
        doc.documentElement.appendChild(style);
}

這樣的話,如果是較少的代碼,可以比較方便的實現到動態加載css的效果,但是如果為了方便維護和管理,並沒有等待時間限制,使用link方式更加合適

三.動態創建script方式

var script=document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "JustWalking.js");
var heads = document.getElementsByTagName("head");
if(heads.length)
    heads[0].appendChild(script);
else
    document.documentElement.appendChild(script);

但是這種方式在IE內核的瀏覽器中支持，在google、360極速、firefox下卻不行

document.write("<link rel=\"stylesheet\" href=\"uild/style.css\" type=\"text/css\" media=\"screen\"/>"); 

document.write("<script type=\"text/javascript\" src=\"JustWalking.js\"></script>");