《动态加载js、css的实例代码_.docx》由会员分享,可在线阅读,更多相关《动态加载js、css的实例代码_.docx(7页珍藏版)》请在三一文库上搜索。
1、动态加载js、css的实例代码_ 这篇文章主要介绍了动态加载js、css的实例代码的相关资料,特别不错具有参考借鉴价值,感爱好的伴侣一起看看吧 一、原生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(
2、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 需要
3、加载的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 + json
4、Data.url); _js.onload = _js.onreadystatechange=function() if(!this.readyState|this.readyState=loaded|this.readyState=complete) if(function = typeof(jsonDatacallback) jsonDatacallback) jsonDatacallback.call(this); _js.onload=_js.onreadystatechange=null; document.getElementsByTagName(head).appendChild
5、(_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).appendChild(_css);/追加到head标签内 二、jquery版本: 采纳deferre
6、d对象返回结果 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 =
7、promise.then( function() return src.indexOf(.css) = ? loadCSS(src) : loadScript(src); ); ); deferred.resolve(); return promise; ; var loadScript = function (src) if(loadedsrc) return loadedsrc.promise(); var deferred = $.Deferred(); var script = $document.createElement(script); script.src = src; scr
8、ipt.onload = function (e) deferred.resolve(e); ; script.onerror = function (e) deferred.reject(e); ; $document.body.appendChild(script); loadedsrc = deferred; return deferred.promise(); ; var loadCSS = function (href) if(loadedhref) return loadedhref.promise(); var deferred = $.Deferred(); var style
9、 = $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); loadedhref = deferred; return deferred.promise(); )(jQuery, document, uiLoad); 以上所述是我给大家介绍的动态加载js、css的实例代码,盼望对大家有所关心! .