动态加载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 相关文章推荐
javascript下利用arguments实现string.format函数
Aug 24 Javascript
javascript ready和load事件的区别示例介绍
Aug 30 Javascript
ie8本地图片上传预览示例代码
Jan 12 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
js实现简单的省市县三级联动效果实例
Feb 18 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
微信小程序实现弹出层效果
May 26 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
记一次vue跨域的解决
Oct 21 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中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
javascript调试之DOM断点调试法使用技巧分享
2014/04/15 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
layui table数据修改的回显方法
2019/09/04 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
pytorch加载自己的图像数据集实例
2020/07/07 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
数据库笔试题
2013/05/09 面试题
简历中自我评价范文3则
2013/12/14 职场文书
学生励志演讲稿
2014/01/06 职场文书
致百米运动员广播稿
2014/01/29 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
防灾减灾标语
2014/10/07 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
婚宴父亲致辞
2015/07/27 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Android实现图片九宫格
2022/06/28 Java/Android