您的位置:首页 > Web前端 > JavaScript

动态加载js、css 代码

2016-05-26 12:15 671 查看
一、原生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或css
25           */
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);


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: