同步异步动态引入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 String对象中常用方法小结(字符串操作)
Jan 27 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
Sep 09 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
在Swiper内如何制作CSS3动画效果示例代码
Dec 07 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
Oct 28 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
JS打开层/关闭层/移动层动画效果的实例代码
2013/05/11 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
PHP中CURL的几个经典应用实例
2015/01/23 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
Python去除列表中重复元素的方法
2015/03/20 Python
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
pygame实现非图片按钮效果
2019/10/29 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python中pow函数用法及功能说明
2020/12/04 Python
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
什么是典型的软件三层结构?软件设计为什么要分层?软件分层有什么好处?
2012/03/14 面试题
中间件分为哪几类
2016/09/18 面试题
秘书英文求职信
2014/04/16 职场文书
读书小明星事迹材料
2014/05/03 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
英文感谢信范文
2015/01/21 职场文书
被委托人身份证明
2015/08/07 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
优化Mysql查询的示例
2022/04/26 MySQL