JS 动态加载js文件和css文件 同步/异步的两种简单方式
/*动态添加js或css,URL:文件路径，FileType：文件类型(js/css)*/
functionAddJsFiles(URL,FileType){
varoHead=document.getElementsByTagName('HEAD').item(0);
varaddheadfile;
if(FileType=="js"){
addheadfile=document.createElement("script");
addheadfile.type="text/javascript";
addheadfile.src=URL;
}else{
addheadfile=document.createElement("link");
addheadfile.type="text/css";
addheadfile.rel="stylesheet";
addheadfile.rev="stylesheet";
addheadfile.media="screen";
addheadfile.href=URL;
}
oHead.appendChild(addheadfile);
}
/*方法调用*/
AddJsFiles("js/index.js","js");
AddJsFiles("css/index.css","css");
经测试发现以上方法进行文件加载时，文件是异步加载的，这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况，
所以以下采用同步加载的方法，当文件加载完成后再去执行相应的代码或方法
/*5.加载文件*/
/*已加载文件缓存列表,用于判断文件是否已加载过，若已加载则不再次加载*/
varclasscodes=[];
window.Import={
/*加载一批文件，_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/
LoadFileList:function(_files,succes){
varFileArray=[];
if(typeof_files==="object"){
FileArray=_files;
}else{
/*如果文件列表是字符串，则用,切分成数组*/
if(typeof_files==="string"){
FileArray=_files.split(",");
}
}
if(FileArray!=null&&FileArray.length>0){
varLoadedCount=0;
for(vari=0;i<FileArray.length;i++){
loadFile(FileArray[i],function(){
LoadedCount++;
if(LoadedCount==FileArray.length){
succes();
}
})
}
}
/*加载JS文件,url:文件路径,success:加载成功回调函数*/
functionloadFile(url,success){
if(!FileIsExt(classcodes,url)){
varThisType=GetFileType(url);
varfileObj=null;
if(ThisType==".js"){
fileObj=document.createElement('script');
fileObj.src=url;
}elseif(ThisType==".css"){
fileObj=document.createElement('link');
fileObj.href=url;
fileObj.type="text/css";
fileObj.rel="stylesheet";
}elseif(ThisType==".less"){
fileObj=document.createElement('link');
fileObj.href=url;
fileObj.type="text/css";
fileObj.rel="stylesheet/less";
}
success=success||function(){};
fileObj.onload=fileObj.onreadystatechange=function(){
if(!this.readyState||'loaded'===this.readyState||'complete'===this.readyState){
success();
classcodes.push(url)
}
}
document.getElementsByTagName('head')[0].appendChild(fileObj);
}else{
success();
}
}
/*获取文件类型,后缀名，小写*/
functionGetFileType(url){
if(url!=null&&url.length>0){
returnurl.substr(url.lastIndexOf(".")).toLowerCase();
}
return"";
}
/*文件是否已加载*/
functionFileIsExt(FileArray,_url){
if(FileArray!=null&&FileArray.length>0){
varlen=FileArray.length;
for(vari=0;i<len;i++){
if(FileArray[i]==_url){
returntrue;
}
}
}
returnfalse;
}
}
}
varFilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"];
Import.LoadFileList(FilesArray,function(){
/*这里写加载完成后需要执行的代码或方法*/
});
以上就是小编为大家带来的JS动态加载js文件和css文件同步/异步的两种简单方式的全部内容了，希望对大家有所帮助，多多支持毛票票~