动态加载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 ie6兼容position:fixed实现思路
Apr 01 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
CSS图片响应式 垂直水平居中
Aug 14 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
seajs学习之模块的依赖加载及模块API的导出
Oct 20 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
node.js的事件机制
Feb 08 Javascript
js实现开关灯效果
Mar 30 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函数引用返回的实例详解
2016/09/11 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
Exjs 入门篇
2010/04/07 Javascript
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
2016/01/27 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
2017/07/07 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
如何进行微信公众号开发的本地调试的方法
2019/06/16 Javascript
微信小程序绘制图片发送朋友圈
2019/07/25 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python的re模块正则表达式操作
2016/05/25 Python
Python连接数据库学习之DB-API详解
2017/02/07 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
python调用java的jar包方法
2018/12/15 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
python安装后的目录在哪里
2020/06/21 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
公积金转移接收函
2014/01/11 职场文书
班组拓展活动方案
2014/08/14 职场文书
致800米运动员广播稿(10篇)
2014/10/17 职场文书