同步异步动态引入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 相关文章推荐
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
Nov 19 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jQuery验证元素是否为空的两种常用方法
Mar 17 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
基于layPage插件实现两种分页方式浅析
Jul 27 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
JS常用跨域方法实现原理解析
Dec 09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
关于Javascript闭包与应用的详解
Apr 22 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常用技巧总结(附函数代码)
2012/02/04 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
JavaScript 变量基础知识
2009/11/07 Javascript
9个JavaScript评级/投票插件
2010/01/18 Javascript
jquery子元素过滤选择器使用示例
2013/06/24 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
利用JS实现数字增长
2016/07/28 Javascript
javascript self对象使用详解
2016/10/18 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
python实现SMTP邮件发送功能
2020/06/16 Python
全面理解Python中self的用法
2016/06/04 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
python win32 简单操作方法
2017/05/25 Python
python简单商城购物车实例代码
2018/03/15 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
python使用tkinter库实现五子棋游戏
2019/06/18 Python
django基于restframework的CBV封装详解
2019/08/08 Python
Pytorch之parameters的使用
2019/12/31 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
5款实用的python 工具推荐
2020/10/13 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
哈弗商学院毕业生求职信
2014/02/26 职场文书
职工代表大会主持词
2014/04/01 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
解析CSS 提取图片主题色功能(小技巧)
2021/05/12 HTML / CSS
mysql left join快速转inner join的过程
2021/06/30 MySQL