动态加载js、css的实例代码

时间:2021-05-25

一、原生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")[].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")[].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') >= ? 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的实例代码,希望对大家有所帮助!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章