用JavaScript動態載入CSS和JS檔案

今天項目中需要用到動態載入 CSS 檔案，經過一番折騰終於搞定，回家整理了一下，順便融合了動態載入 JS 的功能寫成了一個對象，先上代碼：

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);    }}

對象包含兩個完全獨立的方法，分別用來載入 CSS 檔案和 JS 檔案，參數均為欲載入的檔案路徑。原理非常的簡單：對於不同的負載檔案類型建立不同的節點，然後添加各自的屬性，最後扔到 head 標籤裡面。經測試，本方法相容各瀏覽器，安全、無毒、環保，實乃 web 開發人員工作常備代碼，請放心使用。
下面是調用代碼，異常簡單：

//動態載入 CSS 檔案dynamicLoading.css("test.css");//動態載入 JS 檔案dynamicLoading.js("test.js");

這裡還提供了本文的 demo ，下載、解壓，如果一切正常，開啟 HTML 檔案，頁面將彈出對話方塊，並呈現鮮豔的紅色，這說明它已經成功地動態載入了外部的 CSS 和 JS 檔案。

dynamic_loading.zip

    摘自：http://www.jsmix.com/javascript/dynamic-loading-css-javascript.html