JavaScript實(shí)現(xiàn)動(dòng)態(tài)加載CSS和JS文件

字號(hào):


    對(duì)象包含兩個(gè)完全獨(dú)立的方法,分別用來(lái)加載 CSS 文件和 JS 文件,參數(shù)均為欲加載的文件路徑。原理非常的簡(jiǎn)單:對(duì)于不同的加載文件類型創(chuàng)建不同的節(jié)點(diǎn),然后添加各自的屬性,最后扔到 head 標(biāo)簽里面。經(jīng)測(cè)試,本方法兼容各瀏覽器,安全、無(wú)毒、環(huán)保,實(shí)乃 web 開(kāi)發(fā)人員工作常備代碼,請(qǐng)放心使用。
    var dynamicLoading = {
    css: function(path){
    if(!path || path.length === 0){
    throw new Error('argument "path" is required !');
    }
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.href = path;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link);
    },
    js: function(path){
    if(!path || path.length === 0){
    throw new Error('argument "path" is required !');
    }
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = path;
    script.type = 'text/javascript';
    head.appendChild(script);
    }
    }
    下面是調(diào)用代碼,異常簡(jiǎn)單:
    //動(dòng)態(tài)加載 CSS 文件
    dynamicLoading.css("test.css");
    //動(dòng)態(tài)加載 JS 文件
    dynamicLoading.js("test.js");