动态加载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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript基础知识大集锦(二) 推荐收藏
Jan 13 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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开发中常用的8个小技巧
2008/08/27 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
php 地区分类排序算法
2013/07/01 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
jquery使用经验小结
2015/05/20 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
解决angularJS中input标签的ng-change事件无效问题
2018/09/13 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
何时/使用 Vue3 render 函数的教程详解
2020/07/25 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
python实现堆栈与队列的方法
2015/01/15 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
Python如何抓取天猫商品详细信息及交易记录
2018/02/23 Python
使用Python写一个小游戏
2018/04/02 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python实现不规则图形填充的思路
2020/02/02 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
Guess美国官网:美国知名服装品牌
2019/04/08 全球购物
简单说下OSPF的操作过程
2014/08/13 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫