JavaScript_動態載入CSS和JS檔案

標籤：dex   href   head   建立   key   調用   需要   alt   throw   

項目中需要用到動態載入CSS 檔案，整理了一下，順便融合了動態載入JS 的功能寫成了一個對象，先上代碼：

?

1234567891011121314151617181920212223

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 開發人員工作常備代碼。
下面是調用代碼，異常簡單：

?

12345

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

JavaScript_動態載入CSS和JS檔案