同步异步动态引入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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
javascript模拟命名空间
Apr 17 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
Vue 递归多级菜单的实例代码
May 05 Javascript
vue点击自增和求和的实例代码
Nov 06 Javascript
vue实现多个echarts根据屏幕大小变化而变化实例
Jul 19 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
php求一个网段开始与结束IP地址的方法
2015/07/09 PHP
PHP带节点操作的无限分类实现方法详解
2016/11/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
2018/07/10 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python内置函数的用法实例教程
2014/09/08 Python
简单介绍Python中的JSON模块
2015/04/08 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
计算机毕业生自荐信
2014/06/12 职场文书
2015年实习单位评语
2015/03/25 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
Python学习之包与模块详解
2022/03/19 Python
python小型的音频操作库mp3Play
2022/04/24 Python