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


Posted in Javascript onAugust 15, 2013

动态加载script到页面大约有俩方法

第一种就是利用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'并不能工作的很好,理论上状态的变化是如下步骤:
0 uninitialized
1 loading
2 loaded
3 interactive
4 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中对循环语句的优化技巧深入探讨
Jun 06 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
Node.js编码规范
Jul 14 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
Jan 23 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
详解webpack运行Babel教程
Jun 13 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
js string 转 int 注意的问题小结
Aug 15 #Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 #Javascript
js控制表单操作的常用代码小结
Aug 15 #Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 #Javascript
jQuery UI 实现email输入提示实例
Aug 15 #Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
You might like
PHP 日期加减的类,很不错
2009/10/10 PHP
PHP中文处理 中文字符串截取(mb_substr)和获取中文字符串字数
2011/11/10 PHP
windows下配置php5.5开发环境及开发扩展
2014/12/25 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
2017/09/01 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
详解.vue文件解析的实现
2018/06/11 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
Python 使用PIL numpy 实现拼接图片的示例
2018/05/08 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
Python类继承和多态原理解析
2020/02/05 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
新员工入职感言
2014/02/01 职场文书
班级德育工作实施方案
2014/02/21 职场文书
验房委托书
2014/08/30 职场文书
四查四看整改措施
2014/09/19 职场文书
2015年销售内勤工作总结
2015/04/27 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python
win11无法登录onedrive错误代码0x8004def7怎么办 ?
2022/04/05 数码科技
《废话连篇——致新手》——chinapizza
2022/04/05 无线电