JS 动态加载js文件和css文件 同步/异步的两种简单方式

前端之家收集整理的这篇文章主要介绍了JS 动态加载js文件和css文件 同步/异步的两种简单方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="jb51code">
<pre class="brush:js;">
/动态添加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");

经测试发现以上方法进行文件加载时,文件是异步加载的,这样就可能导致加载文件后立即使用文件中的方法或变量会产生错误的情况,

所以以下采用同步加载的方法,当文件加载完成后再去执行相应的代码方法

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文件 同步/异步的两种简单方式的全部内容了,希望对大家有所帮助,多多支持编程之家~

猜你在找的JavaScript相关文章