欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2020-12-29 17:19:06|栏目:JavaScript代码|点击:

一、原生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的实例代码,希望对大家有所帮助!

上一篇:JavaScript 继承详解(一)

栏    目:JavaScript代码

下一篇:杨氏矩阵查找的JS代码

本文标题:动态加载js、css的实例代码

本文地址:http://www.codeinn.net/misctech/38083.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有