一、原生js:
/** * 加载js和css文件 * @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(\"<script type=\'text/javascript\' src=\'\"+ jsonData.path + jsonData.url+\"\'></script>\"); } else if(jsonData.type == \"css\") { document.writeln(\"<link rel=\'stylesheet\' href=\'\"+jsonData.path + jsonData.url+\"\' type=\'text/css\' />\"); } } /** * 加载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标签内 } 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的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持phpstudy。
本文地址:https://www.stayed.cn/item/15493
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我