同步异步动态引入js文件的几种方法总结


Posted in Javascript onSeptember 23, 2016

动态加载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文件的几种方法总结的全部内容了,希望对大家有所帮助,多多支持三水点靠木~

Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
前后台交互过程中json格式如何解析以及如何生成
Dec 26 Javascript
JS小功能(button选择颜色)简单实例
Nov 29 Javascript
jquery选择器之基本过滤选择器详解
Jan 27 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
Sep 23 #Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 #Javascript
form表单转Json提交的方法(推荐)
Sep 23 #Javascript
关于验证码在IE中不刷新的快速解决方法
Sep 23 #Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 #Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 #Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 #Javascript
You might like
php下用GD生成生成缩略图的两个选择和区别
2007/04/17 PHP
php socket方式提交的post详解
2008/07/19 PHP
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
查找php配置文件php.ini所在路径的二种方法
2014/05/26 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
PHP实现文件上传功能实例代码
2017/05/18 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
[01:51]2018年度CS GO最具人气外援-完美盛典
2018/12/16 DOTA
python函数返回多个值的示例方法
2013/12/04 Python
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python字典快速保存于读取的方法
2018/03/23 Python
BP神经网络原理及Python实现代码
2018/12/18 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
Python数据可视化图实现过程详解
2020/06/12 Python
Django如何批量创建Model
2020/09/01 Python
Keds官方网站:购买帆布运动鞋和经典皮鞋
2016/11/12 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
简述数组与指针的区别
2014/01/02 面试题
请解释virtual关键字的含义
2015/06/17 面试题
学校办公室主任职责
2013/12/27 职场文书
二年级语文教学反思
2014/02/02 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2015大学生实训报告
2014/11/05 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang