同步异步动态引入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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
vue实现表格增删改查效果的实例代码
Jul 18 Javascript
React中使用collections时key的重要性详解
Aug 07 Javascript
Vue实现本地购物车功能
Dec 05 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
带你使用webpack快速构建web项目的方法
Nov 12 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
php去除数组中重复数据
2014/11/18 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
js修改table中Td的值(定义td的双击事件)
2013/01/10 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
JQuery中serialize()用法实例分析
2015/02/06 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python实现傅里叶级数展开的实现
2018/07/21 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
专科毕业生学习生活的自我评价
2013/10/26 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
职位说明书范文
2014/05/07 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2016年敬老月活动总结
2016/04/05 职场文书