动态加载js、css的简单实现代码
更新时间:2016年05月26日 10:09:03 投稿:jingxian
下面小编就为大家带来一篇动态加载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(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的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
这篇文章主要介绍了JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别,结合实例形式分析了JS基本数据类型、引用数据类型概念、用法,以及堆和栈的区别,需要的朋友可以参考下2020-03-03在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
这样的脚本你在ie8下调用,在ie8地址栏下按下回车后调用jquery的对像、方法什么的没有问题,但是刷新之后就有问题。就是刷新之后无论怎样你要在地址栏按一下回车。2010-11-1110个必备的JavaScript async/await工具函数分享
当谈到异步编程时,async/await是JavaScript中常用的功能之一,本文为大家整理了10个常用的await和async函数示例,感兴趣的小伙伴可以参考一下2023-12-12JS中call(),apply(),bind()函数的区别与用法详解
这篇文章主要介绍了JS中call(),apply(),bind()函数的高级用法详解,需要的朋友可以参考下2022-12-12
最新评论