动态加载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+绝对定位的实现
May 08 Javascript
jQuery中读取json文件示例代码
May 10 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
js 获取浏览器版本以此来调整CSS的样式
Jun 03 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
Sep 19 Javascript
JS实现微信弹出搜索框 多条件查询功能
Dec 13 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
JavaScript 实现继承的几种方式
Feb 19 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
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
vue2 自定义动态组件所遇到的问题
2017/06/08 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
JS异步处理的进化史深入讲解
2019/08/25 Javascript
[53:52]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
在Python文件中指定Python解释器的方法
2019/02/18 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Python通过socketserver处理多个链接
2020/03/18 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
银行金融服务方案
2014/06/11 职场文书
警察群众路线对照检查材料思想汇报
2014/10/01 职场文书
师德师风自查材料
2014/10/14 职场文书
个人批评与自我批评
2014/10/15 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
实施意见格式范本
2015/06/05 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书