你的位置:首页 > Java教程

[Java教程]动态加载js、css 代码


一、原生js:

 1 /** 2      * 加载js和css文件 3      * @param     jsonData.path        前缀路径 4      * @param     jsonData.url        需要加载的js路径或css路径 5      * @param     jsonData.type        需要加载的类型 js或css 6     */ 7     function loadWriteFiles(jsonData) 8      { 9       jsonData.path = jsonData.path != undefined ? jsonData.path : "";10       if(jsonData.type == "js")11        {12         document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>");13        }14       else if(jsonData.type == "css")15        {16         document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />");17        }18      }19     20     /**21      * 加载js或css到head中22      * @param     jsonData.path        前缀路径23      * @param     jsonData.url        需要加载的js路径或css路径24      * @param     jsonData.type        需要加载的类型 js或css25      */26     function loadFilesToHead(jsonData)27      {28       jsonData.path = jsonData.path != undefined ? jsonData.path : "";29       if(jsonData.type == "js")30        {31         var _js = document.createElement("script");32         _js.setAttribute("type", "text/javascript");33         _js.setAttribute("src", jsonData.path + jsonData.url);34         _js.onload = _js.onreadystatechange=function(){ 35           if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 36             if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){37                 jsonData["callback"].call(this);38              }39            } 40           _js.onload=_js.onreadystatechange=null; 41          } 42         document.getElementsByTagName("head")[0].appendChild(_js);//追加到head标签内43        }44       else if(jsonData.type == "css")45        {46         var _css = document.createElement("link");47         _js.setAttribute("type", "text/css");48         _css.setAttribute("rel", "stylesheet");49         _css.setAttribute("href", jsonData.path + jsonData.url);50         document.getElementsByTagName("head")[0].appendChild(_css);//追加到head标签内51        }52     }

 

 

二、jquery版本:

    采用deferred对象返回结果

 

 1 var uiLoad = uiLoad || {}; 2  3 (function($, $document, uiLoad) { 4   "use strict"; 5  6   var loaded = [], 7   promise = false, 8   deferred = $.Deferred(); 9 10   uiLoad.load = function (srcs) {11     srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/);12     if(!promise){13       promise = deferred.promise();14     }15 16    $.each(srcs, function(index, src) {17     promise = promise.then( function(){18       return src.indexOf('.css') >=0 ? loadCSS(src) : loadScript(src);19     } );20    });21    deferred.resolve();22    return promise;23   };24 25   var loadScript = function (src) {26     if(loaded[src]) return loaded[src].promise();27 28     var deferred = $.Deferred();29     var script = $document.createElement('script');30     script.src = src;31     script.onload = function (e) {32       deferred.resolve(e);33     };34     script.onerror = function (e) {35       deferred.reject(e);36     };37     $document.body.appendChild(script);38     loaded[src] = deferred;39 40     return deferred.promise();41   };42 43   var loadCSS = function (href) {44     if(loaded[href]) return loaded[href].promise();45 46     var deferred = $.Deferred();47     var style = $document.createElement('link');48     style.rel = 'stylesheet';49     style.type = 'text/css';50     style.href = href;51     style.onload = function (e) {52       deferred.resolve(e);53     };54     style.onerror = function (e) {55       deferred.reject(e);56     };57     $document.head.appendChild(style);58     loaded[href] = deferred;59 60     return deferred.promise();61   }62 63 })(jQuery, document, uiLoad);