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

前端之家收集整理的这篇文章主要介绍了动态加载js、css的简单实现代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、原生js:

文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.type == "js") { document.writeln(""); } else if(jsonData.type == "css") { document.writeln(""); } }
 /**
 * 加载js或css到head中
 * @param     jsonData.path        前缀路径
 * @param     jsonData.url        需要加载的js路径或css路径
 * @param     jsonData.type        需要加载的类型 js或css
 */
 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<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>内
   }
   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<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>内
   }
 }</pre>

二、jquery版本:

采用deferred对象返回结果

(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的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/48445.html

猜你在找的JavaScript相关文章