动态加载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 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jquery常用方法及使用示例汇总
Nov 08 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
Node.js制作简单聊天室
Jan 12 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
iview的table组件自带的过滤器实现
Jul 12 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/06/25 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP 99乘法表的几种实现代码
2020/10/13 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
JQuery的AJAX实现文件下载的小例子
2013/05/15 Javascript
cookie.js 加载顺序问题怎么才有效
2013/07/31 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Django的models模型的具体使用
2019/07/15 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
android面试问题与答案
2016/12/27 面试题
教师实习期自我鉴定
2013/10/06 职场文书
总裁助理岗位职责
2014/02/17 职场文书
品德评语大全
2014/05/05 职场文书
毕业证代领委托书
2014/09/26 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
Python matplotlib多个子图绘制整合
2022/04/13 Python