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 相关文章推荐
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
vue实现修改图片后实时更新
Nov 14 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
JQUERY操作JSON实例代码
2010/02/09 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
Vue使用localStorage存储数据的方法
2019/05/27 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
[03:59]DOTA2英雄梦之声_第07期_水晶室女
2014/06/23 DOTA
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python写入xml文件的方法
2015/05/08 Python
python追加元素到列表的方法
2015/07/28 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python微信撤回监测代码
2019/04/29 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
使用python脚本自动创建pip.ini配置文件代码实例
2019/09/20 Python
wxpython绘制音频效果
2019/11/18 Python
python 实现return返回多个值
2019/11/19 Python
python中取绝对值简单方法总结
2020/07/24 Python
HTTP状态码详解
2021/03/18 杂记
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
开会通知
2015/04/20 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
关于Mybatis中SQL节点的深入解析
2022/03/19 Java/Android