动态加载js、css的简单实现代码
一、原生js：
/**
*加载js和css文件
*@paramjsonData.path前缀路径
*@paramjsonData.url需要加载的js路径或css路径
*@paramjsonData.type需要加载的类型js或css
*/
functionloadWriteFiles(jsonData)
{
jsonData.path=jsonData.path!=undefined?jsonData.path:"";
if(jsonData.type=="js")
{
document.writeln("<scripttype='text/javascript'src='"+jsonData.path+jsonData.url+"'></script>");
}
elseif(jsonData.type=="css")
{
document.writeln("<linkrel='stylesheet'href='"+jsonData.path+jsonData.url+"'type='text/css'/>");
}
}
/**
*加载js或css到head中
*@paramjsonData.path前缀路径
*@paramjsonData.url需要加载的js路径或css路径
*@paramjsonData.type需要加载的类型js或css
*/
functionloadFilesToHead(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标签内
}
elseif(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对象返回结果
varuiLoad=uiLoad||{};
(function($,$document,uiLoad){
"usestrict";
varloaded=[],
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(){
returnsrc.indexOf('.css')>=0?loadCSS(src):loadScript(src);
});
});
deferred.resolve();
returnpromise;
};
varloadScript=function(src){
if(loaded[src])returnloaded[src].promise();
vardeferred=$.Deferred();
varscript=$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;
returndeferred.promise();
};
varloadCSS=function(href){
if(loaded[href])returnloaded[href].promise();
vardeferred=$.Deferred();
varstyle=$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;
returndeferred.promise();
}
})(jQuery,document,uiLoad);
以上这篇动态加载js、css的简单实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。