同步异步动态引入js文件的几种方法总结
动态加载js文件
有时候我们需要根据参数不同来引入不同的js文件，用html直接写标签满足不了我们的需求，总结几种方法，以及同步异步加载的各种需求
一.直接加载
<divid="divId"></div> <script>
二.异步加载，并发执行，但引入js内容不能直接使用
//1.1直接document.write
document.write("<scriptsrc='test.js'><\/script>");
//1.2动态改变已有script的src属性
//页面中有<scriptsrc=''id="s1"></script>
document.getElementById('s1').src="test.js";
//1.3动态创建js
varrootObject=document.getElementById("divId");
varoScript=document.createElement("script");
oScript.type="text/javascript";
oScript.src=test.js;//test.js方法中有一个方法functiontest(){alert("test");}
rootObject.appendChild(oScript);
//2.0调用js
test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)
三.同步加载，单步加载，引入js内容可以直接使用
varSkip={};
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
Skip.getXmlHttpRequest=function(){
if(window.XMLHttpRequest)//除了IE外的其它浏览器
returnnewXMLHttpRequest();
elseif(window.ActiveXObject)//IE
returnnewActiveXObject("MsXml2.XmlHttp");
},
//导入内容
Skip.includeJsText=function(rootObject,jsText){
if(rootObject!=null){
varoScript=document.createElement("script");
oScript.type="text/javascript";
//oScript.id=sId;
//oScript.src=fileUrl;
//oScript.defer=true;
oScript.text=jsText;
rootObject.appendChild(oScript);
//alert(oScript.text);
}
},
//导入文件
Skip.includeJsSrc=function(rootObject,fileUrl){
if(rootObject!=null){
varoScript=document.createElement("script");
oScript.type="text/javascript";
oScript.src=fileUrl;
rootObject.appendChild(oScript);
}
},
//同步加载
Skip.addJs=function(rootObject,url){
varoXmlHttp=Skip.getXmlHttpRequest();
oXmlHttp.onreadystatechange=function(){//其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
if(oXmlHttp.readyState==4){//当执行完成以后(返回了响应)所要执行的
if(oXmlHttp.status==200||oXmlHttp.status==304){//200有读取对应的url文件,404表示不存在这个文件
Skip.includeJsSrc(rootObject,url);
}else{
alert('XMLrequesterror:'+oXmlHttp.statusText+'('+oXmlHttp.status+')');
}
}
}
//1.True表示脚本会在send()方法之后继续执行，而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为"false"，可以省去额外的onreadystatechange代码,它表示服务器返回响应后才执行send()后面的方法.
//2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState==4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState==4下的操作,它相当于只有了这一种状态.
oXmlHttp.open('GET',url,false);//url为js文件时,ie会自动生成'<scriptsrc="*.js"type="text/javascript"></script>',ff不会
oXmlHttp.send(null);
Skip.includeJsText(rootObject,oXmlHttp.responseText);
}
};
varrootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotntest(){alert("test");}
test();//即使马上调用也不会出错了.
</script>
总结：
1.ie动态加载js文件时,它默认就为同步,可以不用设置同步(也可直调用Skip.includeJsSrc())
2.ff动态加载js文件时,它默认为异步,要设置成同步,加载完直接调用才不会出错
3.无论ie还是ff在动态加载js内容时,没有请求服务器,不会存在异步问题
注:无论ie还是ff在页面加载js时(即执行整个页面),都是为同步的加载,除非设置script的属性defer="true"(此属性好像也只是对ie有效)
以上就是小编为大家带来的同步异步动态引入js文件的几种方法总结的全部内容了，希望对大家有所帮助，多多支持毛票票~