JavaScript动态插入script的基本思路及实现函数


Posted in Javascript onNovember 11, 2013

在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是:

1、动态创建一个script标签,设置其src属性,type属性等

2、将script节点插入页面,加载js文件

即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现:

// 动态插入script标签 
function createScript(url, callback){ 
var oScript = document.createElement('script'); 
oScript.type = 'text/javascript'; 
oScript.async = true; 
oScript.src = url; 
/* 
** script标签的onload和onreadystatechange事件 
** IE6/7/8支持onreadystatechange事件 
** IE9/10支持onreadystatechange和onload事件 
** Firefox/Chrome/Opera支持onload事件 
*/ // 判断IE8及以下浏览器 
var isIE = !-[1,]; 
if(isIE){ 
alert('IE') 
oScript.onreadystatechange = function(){ 
if(this.readyState == 'loaded' || this.readyState == 'complete'){ 
callback(); 
} 
} 
} else { 
// IE9及以上浏览器,Firefox,Chrome,Opera 
oScript.onload = function(){ 
callback(); 
} 
} 
document.body.appendChild(oScript); 
}

使用方法如:
createScript('xxx.js', function(){ 
console.log('OK'); 
});
Javascript 相关文章推荐
jQuery 1.0.2
Oct 11 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
Apr 25 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
微信小程序手势操作之单触摸点与多触摸点
Mar 10 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
使用Promise封装小程序wx.request的实现方法
Nov 13 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 #Javascript
jquery 缓存问题的几个解决方法
Nov 11 #Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 #Javascript
javascript自定义startWith()和endWith()的两种方法
Nov 11 #Javascript
javascript打印输出json实例
Nov 11 #Javascript
JS简单的图片放大缩小的两种方法
Nov 11 #Javascript
js全屏显示显示代码的三种方法
Nov 11 #Javascript
You might like
php中session过期时间设置及session回收机制介绍
2014/05/05 PHP
PHP中关键字interface和implements详解
2017/06/14 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
浅谈Javascript面向对象编程
2011/11/15 Javascript
把jquery 的dialog和ztree结合实现步骤
2013/08/02 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
vue+webpack模拟后台数据的示例代码
2018/07/26 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Python环境变量设置方法
2016/08/28 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Matplotlib 生成不同大小的subplots实例
2018/05/25 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
优秀大学生推荐信范文
2013/11/28 职场文书
初婚未育证明样本
2014/10/24 职场文书
评先进个人材料
2014/12/29 职场文书
学校节水倡议书
2015/04/29 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang