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


Posted in Javascript onApril 22, 2016

这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下
第一种便是利用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'并不能工作的很好,理论上状态的变化是如下步骤:
1.uninitialized
2.loading
3.loaded
4.interactive
5.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 相关文章推荐
JS 判断代码全收集
Apr 28 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
Jan 02 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
jQuery UI设置固定日期选择特效代码分享
Aug 27 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
Koa2 之文件上传下载的示例代码
Mar 29 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
vue视图不更新情况详解
May 16 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
JavaScript记录光标在编辑器中位置的实现方法
Apr 22 #Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 #Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 #Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 #Javascript
javascript常见数字进制转换实例分析
Apr 21 #Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 #Javascript
动态加载js文件简单示例
Apr 21 #Javascript
You might like
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php获取文件大小的方法
2014/02/26 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
nodejs分页类代码分享
2014/06/17 NodeJs
javascript常用函数归纳整理
2014/10/31 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
悬浮广告方法日常收集整理
2016/03/18 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
angular4+百分比进度显示插件用法示例
2019/05/05 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
零基础学Python(一)Python环境安装
2014/08/20 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python实现文本界面网络聊天室
2018/12/12 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
Huda Beauty官方商店:化妆和美容产品
2020/09/05 全球购物
网上快餐厅创业计划书
2014/02/01 职场文书
财务内勤岗位职责
2014/04/17 职场文书
化工操作工岗位职责
2014/04/29 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技