javascript include/import 動態載入js/css檔案方法總結

第一種：一般用在外部CSS檔案中載入必須的檔案

 程式碼

代碼如下	複製代碼
@import url(style.css);

/*只能用在CSS檔案中或者style標籤中*/

第二種：簡單的在頁面中載入一個外部CSS檔案

 程式碼

代碼如下	複製代碼
document.createStyleSheet(cssFile);

第三種：用createElement方法建立CSS的Link標籤

 程式碼

代碼如下	複製代碼
var head = document.getElementsByTagName('HEAD').item(0); var style = document.createElement('link'); style.href = 'style.css'; style.rel = 'stylesheet'; style.type = 'text/css'; head.appendChild(style);

這裡貼上我以前在項目中使用的幾個函數，希望對大家有用！

 程式碼

代碼如下

複製代碼

function loadJs(file){     var scriptTag = document.getElementById('loadScript');     var head = document.getElementsByTagName('head').item(0);     if(scriptTag) head.removeChild(scriptTag);     script = document.createElement('script');     script.src = "../js/mi_"+file+".js";     script.type = 'text/javascript';     script.id = 'loadScript';     head.appendChild(script); } function loadCss(file){     var cssTag = document.getElementById('loadCss');     var head = document.getElementsByTagName('head').item(0);     if(cssTag) head.removeChild(cssTag);     css = document.createElement('link');     css.href = "../css/mi_"+file+".css";     css.rel = 'stylesheet';     css.type = 'text/css';     css.id = 'loadCss';     head.appendChild(css); }

使用JS動態在頁面載入CSS檔案

剛剛在寫隨筆的時候發現cnblogs好像將自己在文章的HTML裡定義的CSS(例如：<link rel="stylesheet" type="text/css" href="xxx.css" /> )都過濾掉了，記得以前自己收藏過一個JS函數，可以動態載入CSS檔案，翻翻電腦果然找到了，代碼貼出來，說不準在工作中也會用到呢。

代碼如下

複製代碼

<script language="javascript">     function loadjscssfile(filename, filetype) {         if (filetype == "js") {             var fileref = document.createElement('script');             fileref.setAttribute("type", "text/javascript");             fileref.setAttribute("src", filename)         } else if (filetype == "css") {             var fileref = document.createElement("link");             fileref.setAttribute("rel", "stylesheet");             fileref.setAttribute("type", "text/css");             fileref.setAttribute("href", filename)         }         if (typeof fileref != "undefined") document.getElementsByTagName("head")[0].appendChild(fileref)     }     loadjscssfile("http://news.163.com/special/0001jt/dblue.css", "css"); </

一個完美的外掛程式可動態載入js,和css

更新：2012.07.13

*修複queued因定義為this.queued導致多個load混亂

*更改參數為數組

使用方法為直接調用Util.load()，可以為每個檔案添加回調，也可以添加一個全域回調，樣本：

代碼如下

複製代碼

[     Util.load([       ["/misc/js/content.js", function() {           // 單個回調       }],       ["/misc/js/comment.js"],       ["/misc/js/home.js"]   ], function() {       // 全域回調   }); ] [     var Util = {       /**        * 全域js列表        */       scripts: {},       head: document.head || document.getElementsByTagName("head")[0] || document.documentElement,           /**        * 非同步載入js檔案        */       load: function(queue, callback) {           var self = this, queued = queue.length;               for (var i = 0, l = queue.length; i < l; i++) {               var elem;               elem = document.createElement("script");               elem.setAttribute("type", "text/javascript");               elem.setAttribute("async", "async");               elem.setAttribute("src", queue[i][0]);               // 檔案還沒有處理過               if (typeof this.scripts[elem.src] === "undefined") {                   // 使onload取得正確elem和index                   (function(elem, index) {                       elem.onload = elem.onreadystatechange = function() {                           if (! elem.readyState || /loaded|complete/.test(elem.readyState)) {                               queued--;                               // 解決IE記憶體泄露                               elem.onload = elem.onreadystatechange = null;                               // 釋放引用                               elem = null;                               // 調用callback                               queue[index][1] && queue[index][1]();                               // 隊列全部載入，調用最終callback                               if (queued === 0) {                                   callback && callback();                               }                           }                       };                   })(elem, i);               }               // 已處理，調用callback               else {                   queued--;                   queue[i][1] && queue[i][1]();               }               this.head.appendChild(elem);                   // 隊列全部載入，調用最終callback               if (queued === 0) {                   callback && callback();               }           }       }   };         ]

使用舉例：

 // 路徑寫法和<script><link>中一樣就行了

/ 第一種 單個檔案，帶回調

代碼如下	複製代碼
include("js/jquery.js", function () {       alert("i'm callback!");   });

// 第二種 多個檔案，帶回調

// 多個檔案以數組的形式書寫，每個檔案可以單獨帶回調，

// 最後一個回調將在最後一個檔案載入完後調用

代碼如下	複製代碼
include([       ["js/jquery.js", function () {           alert("i'm callback of jquery.js");       }],       ["js/misc.js", function () {           alert("i'm callback of misc.js");       }],       ["css/style.css", function () {           alert("i'm callback of style.css");       }],       ["css/index.css"]   ], function () {       alert("i'm the last callback!");   });

還有些問題，有空再完善下。