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

一.動態創建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下卻不行

四.打印引入style方式

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

五.打印引入js方式

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