这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇同步异步动态引入 js 文件的几种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
动态加载 js 文件
有时候我们需要根据参数不同来引入不同的 js 文件,用 html 直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求
一. 直接加载
- <div id="divId"></div>
- <script>
二. 异步加载,并发执行,但引入 js 内容不能直接使用
- //1.1 直接document.write
- document.write("<script src='test.js'><\/script>");
- //1.2 动态改变已有script的src属性
- //页面中有<script src='' id="s1"></ script>
- document.getElementById('s1').src="test.js";
- //1.3 动态创建js
- var rootObject=document.getElementById("divId");
- var oScript = document.createElement( "script" );
- oScript.type = "text/javascript";
- oScript.src = test.js; //test.js方法中有一个方法function test(){alert("test");}
- rootObject.appendChild(oScript);
- //2.0 调用js
- test();//在ie中不会出错,在firefox会出错,因为firefox默认为异步加载(在向服务器请求加载test.js文件的同时,继续向下执行了,调用test()方法,就自然找不到这个方法)
三. 同步加载,单步加载,引入 js 内容可以直接使用
- var Skip={};
- //获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
- Skip.getXmlHttpRequest=function (){
- if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
- return new XMLHttpRequest() ;
- else if ( window.ActiveXObject ) // IE
- return new ActiveXObject("MsXml2.XmlHttp") ;
- },
- //导入内容
- Skip.includeJsText =function (rootObject,jsText){
- if ( rootObject != null ){
- var oScript = 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 ){
- var oScript = document.createElement( "script" );
- oScript.type = "text/javascript";
- oScript.src = fileUrl;
- rootObject.appendChild(oScript);
- }
- },
- //同步加载
- Skip.addJs=function(rootObject, url){
- var oXmlHttp = 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( 'XML request error: ' + 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会自动生成 '<script src="*.js" type="text/javascript"> </scr ipt>',ff不会
- oXmlHttp.send(null);
- Skip.includeJsText(rootObject,oXmlHttp.responseText);
- }
- };
- var rootObject=document.getElementById("divId");
- Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
- test();//即使马上调用也不会出错了.
- </script>
总结:
1. ie 动态加载 js 文件时, 它默认就为同步, 可以不用设置同步 (也可直调用 Skip.includeJsSrc())
2. ff 动态加载 js 文件时, 它默认为异步, 要设置成同步, 加载完直接调用才不会出错
3. 无论 ie 还是 ff 在动态加载 js 内容时, 没有请求服务器, 不会存在异步问题
注: 无论 ie 还是 ff 在页面加载 js 时 (即执行整个页面), 都是为同步的加载, 除非设置 script 的属性 defer="true"(此属性好像也只是对 ie 有效)
以上就是小编为大家带来的同步异步动态引入 js 文件的几种方法总结的全部内容了,希望对大家有所帮助,多多支持 phperz~
来源: http://www.phperz.com/article/17/0519/331649.html