/*动态添加js或css,URL:文件路径，FileType：文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; 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.加载文件*/ /* 已加载文件缓存列表,用于判断文件是否已加载过，若已加载则不再次加载*/ var classcodes =[]; window.Import={ /*加载一批文件，_files:文件路径数组,可包括js,css,less文件,succes:加载成功回调函数*/ LoadFileList:function(_files,succes){ var FileArray=[]; if(typeof _files==="object"){ FileArray=_files; }else{ /*如果文件列表是字符串，则用,切分成数组*/ if(typeof _files==="string"){ FileArray=_files.split(","); } } if(FileArray!=null && FileArray.length>0){ var LoadedCount=0; for(var i=0;i< FileArray.length;i++){ loadFile(FileArray[i],function(){ LoadedCount++; if(LoadedCount==FileArray.length){ succes(); } }) } } /*加载JS文件,url:文件路径,success:加载成功回调函数*/ function loadFile(url, success) { if (!FileIsExt(classcodes,url)) { var ThisType=GetFileType(url); var fileObj=null; if(ThisType==".js"){ fileObj=document.createElement('script'); fileObj.src = url; }else if(ThisType==".css"){ fileObj=document.createElement('link'); fileObj.href = url; fileObj.type = "text/css"; fileObj.rel="stylesheet"; }else if(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(); } } /*获取文件类型,后缀名，小写*/ function GetFileType(url){ if(url!=null && url.length>0){ return url.substr(url.lastIndexOf(".")).toLowerCase(); } return ""; } /*文件是否已加载*/ function FileIsExt(FileArray,_url){ if(FileArray!=null && FileArray.length>0){ var len =FileArray.length; for (var i = 0; i < len; i++) { if (FileArray[i] ==_url) { return true; } } } return false; } } } var FilesArray=["js/index.js","js/ClassInherit1.js","js/highcharts_2.21.js","css/index.css"]; Import.LoadFileList(FilesArray,function(){ /*这里写加载完成后需要执行的代码或方法*/ });

以上就是小编为大家带来的JS 动态加载js文件和css文件 同步/异步的两种简单方式的全部内容了，希望对大家有所帮助，多多支持查字典教程网~

【JS 动态加载js文件和css文件 同步/异步的两种简单方式】相关文章：

★ 让焦点自动跳转

★ js跨域请求的5中解决方式

★ JavaScript实现DIV层拖动及动态增加新层的方法

★ javascript改变和控制显示的图片大小

★ 判断Checkbox和Radio的一种方法

★ Node.js本地文件操作之文件拷贝与目录遍历的方法

★ jQuery实现html表格动态添加新行的方法

★ 剖析Node.js异步编程中的回调与代码设计模式

★ JavaScript对表格或元素按文本，数字或日期排序的方法

★ 三种AngularJS中获取数据源的方式