动态加载js、css的简单实现代码

一、原生js：

     function loadWriteFiles(jsonData)
     {
jsonData.path = jsonData.path != undefined ? jsonData.path : "";
if(jsonData.type == "js")
{
 document.writeln("");
}
else if(jsonData.type == "css")
{
 document.writeln("");
}
     }
     
     
     function loadFilesToHead(jsonData)
     {
jsonData.path = jsonData.path != undefined ? jsonData.path : "";
if(jsonData.type == "js")
{
  var _js = document.createElement("script");
  _js.setAttribute("type", "text/javascript");
  _js.setAttribute("src", jsonData.path + jsonData.url);
  _js.onload = _js.onreadystatechange=function(){ 
    if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ 
      if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){
  jsonData["callback"].call(this);
      }
    } 
    _js.onload=_js.onreadystatechange=null; 
  } 
  document.getElementsByTagName("head")[0].appendChild(_js);//追加到head标签内
}
else if(jsonData.type == "css")
{
  var _css = document.createElement("link");
  _js.setAttribute("type", "text/css");
  _css.setAttribute("rel", "stylesheet");
  _css.setAttribute("href", jsonData.path + jsonData.url);
  document.getElementsByTagName("head")[0].appendChild(_css);//追加到head标签内
}
     }

二、jquery版本：

采用deferred对象返回结果

var uiLoad = uiLoad || {};

(function($, $document, uiLoad) {
  "use strict";

  var loaded = [],
  promise = false,
  deferred = $.Deferred();

  uiLoad.load = function (srcs) {
    srcs = $.isArray(srcs) ? srcs : srcs.split(/s+/);
    if(!promise){
      promise = deferred.promise();
    }

   $.each(srcs, function(index, src) {
    promise = promise.then( function(){
      return src.indexOf('.css') >=0 ? loadCSS(src) : loadscript(src);
    } );
   });
   deferred.resolve();
   return promise;
  };

  var loadscript = function (src) {
    if(loaded[src]) return loaded[src].promise();

    var deferred = $.Deferred();
    var script = $document.createElement('script');
    script.src = src;
    script.onload = function (e) {
      deferred.resolve(e);
    };
    script.onerror = function (e) {
      deferred.reject(e);
    };
    $document.body.appendChild(script);
    loaded[src] = deferred;

    return deferred.promise();
  };

  var loadCSS = function (href) {
    if(loaded[href]) return loaded[href].promise();

    var deferred = $.Deferred();
    var style = $document.createElement('link');
    style.rel = 'stylesheet';
    style.type = 'text/css';
    style.href = href;
    style.onload = function (e) {
      deferred.resolve(e);
    };
    style.onerror = function (e) {
      deferred.reject(e);
    };
    $document.head.appendChild(style);
    loaded[href] = deferred;

    return deferred.promise();
  }

})(jQuery, document, uiLoad);

以上这篇动态加载js、css的简单实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。