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 相关文章推荐
一个原生的用户等级的进度条
Jul 03 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
jquery提交form表单简单示例分享
Mar 03 Javascript
js简单实现交换Li的值
May 22 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
浅析vue component 组件使用
Mar 06 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
js中switch语句的学习笔记
Mar 25 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中cookie的作用域
2008/03/27 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
js实现简单的购物车有图有代码
2014/05/26 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
全面了解函数声明与函数表达式、变量提升
2016/08/09 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python基础教程之基本内置数据类型介绍
2014/02/20 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Anaconda2下实现Python2.7和Python3.5的共存方法
2018/06/11 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
python3 kubernetes api的使用示例
2021/01/12 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
俞敏洪励志演讲稿
2014/04/29 职场文书
场地使用证明模板
2014/10/25 职场文书
车间主任岗位职责
2015/02/03 职场文书
教师党员个人总结
2015/02/10 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB