动态加载JavaScript文件的两种方法


Posted in Javascript onApril 22, 2016

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下
第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码。第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的
比喻说是我们要动静地加载一个callbakc.js,我们就必要多么一个script标签:
代码如下:  

<script type="text/javascript" src="call.js"></script>

如下代码就是如何通过js来创建这个标签(并且加到head中): 
代码如下:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script);

当加载完call.js, 我们就要调用其中的方法。不过在header.appendChild(script)之后我们不能马上调用其中的js。因为浏览器是异步加载这个js的,我们不知道他什么时候加载完。然而我们可以通过监听事件的办法来判断helper.js是否加载完成。(假设call.js中有一个callback方法) 代码如下:

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

我设了2个事件监听函数, 因为在ie中使用onreadystatechange, 而gecko,webkit 浏览器和opera都支持onload。事实上this.readyState == 'complete'并不能工作的很好,理论上状态的变化是如下步骤:
1.uninitialized
2.loading
3.loaded
4.interactive
5.complete
但是有些状态会被跳过。根据经验在ie7中,只能获得loaded和completed中的一个,不能都出现,原因也许是对判断是不是从cache中读取影响了状态的变化,也可能是其他原因。最好把判断条件改成this.readyState == 'loaded' || this.readyState == 'complete'

参考jQuery的实现我们最后实现为: 代码如下: 

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

还有一种简单的情况就是可以把help()的调用写在helper.js的最后,那么可以保证在helper.js在加载完后能自动调用help(),当然最后还要能这样是不是适合你的应用。

另外需要注意:

1.因为script标签的src可以跨域访问资源,所以这种方法可以模拟ajax,解决ajax跨域访问的问题。
2.如果用ajax返回的html代码中包含script,则直接用innerHTML插入到dom中是不能使html中的script起作用的。粗略的看了下jQuery().html(html)的原代码,jQuery也是先解析传入的参数,剥离其中的script代码,动态创建script标签,所用jQuery的html方法添加进dom的html如果包含script是可以执行的。如:  
 

jQuery("#content").html("<script>alert('aa');<\/script>");

以上就是动态加载JavaScript文件的方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
mapper--图片热点区域高亮组件官方站点
Dec 22 Javascript
Egret引擎开发指南之视觉编程
Sep 03 Javascript
JavaScript中的Math.atan2()方法使用详解
Jun 15 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
Mongoose中document与object的区别示例详解
Sep 18 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
Vue项目安装插件并保存
Jan 28 Javascript
VuePress 静态网站生成方法步骤
Feb 14 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
微信小程序实现上传图片裁剪图片过程解析
Aug 22 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 #Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 #Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 #Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 #Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
动态加载js文件简单示例
Apr 21 #Javascript
You might like
PHP 使用redis简单示例分享
2015/03/05 PHP
php生成短域名函数
2015/03/23 PHP
PHP7变量处理机制修改
2021/03/09 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
vue父组件通过props如何向子组件传递方法详解
2017/08/16 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
vue项目中跳转到外部链接的实例讲解
2018/09/20 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
Python BS4库的安装与使用详解
2018/08/08 Python
pycharm修改file type方式
2019/11/19 Python
Python实现捕获异常发生的文件和具体行数
2020/04/25 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
大学毕业后的十年规划
2014/01/07 职场文书
优良学风班总结材料
2014/02/08 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
学习两会精神心得范文
2014/03/17 职场文书
汽车促销活动方案
2014/03/31 职场文书
摄影展策划方案
2014/06/02 职场文书
霸气队列口号
2014/06/18 职场文书
私人房屋买卖协议书
2014/10/04 职场文书
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers