首頁 > web前端 > js教程 > 如何實作JavaScript動態載入CSS和JS檔_javascript技巧

如何實作JavaScript動態載入CSS和JS檔_javascript技巧

WBOY
發布: 2016-05-16 15:35:02
原創
1086 人瀏覽過

專案中需要用到動態載入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");
登入後複製

以上就是告訴大家如何實作JavaScript動態載入CSS和JS文件,希望對大家的學習有幫助。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板