动态加载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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
javascript replace()正则替换实现代码
Feb 26 Javascript
javascript中万恶的function实例分析
May 25 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
vue组件实例解析
Jan 10 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 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中使用数组指针函数操作数组示例
2014/11/19 PHP
php组合排序简单实现方法
2016/10/15 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python设置windows桌面壁纸的实现代码
2013/01/28 Python
Python变量类型知识点总结
2019/02/18 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
浅析Python迭代器的高级用法
2020/07/16 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
Python 中 sorted 如何自定义比较逻辑
2021/02/02 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
市三好学生主要事迹
2014/01/28 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
化妆品促销方案
2014/02/24 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
建议书格式
2015/02/04 职场文书
秋收起义观后感
2015/06/11 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
行为规范主题班会
2015/08/13 职场文书
环保建议书作文400字
2015/09/14 职场文书
解决mysql问题:由于找不到MSVCR120.dll,无法继续执行代码
2021/06/26 MySQL
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技