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 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
浅谈javascript 面向对象编程
Oct 28 Javascript
javascript面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
javascript实现切换td中的值
Dec 05 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
React+Antd+Redux实现待办事件的方法
Mar 14 Javascript
javascript实现弹幕墙效果
Nov 28 Javascript
微信小程序如何实现精确的日期时间选择器
Jan 21 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
Postman动态获取返回值过程详解
Jun 30 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学习之数据类型之间的转换代码
2011/05/29 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
php与js的区别是什么
2013/08/05 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
js格式化时间的方法
2015/12/18 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
python关于变量名的基础知识点
2020/03/03 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
css3弹性盒模型实例介绍
2013/05/27 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
大学生职业生涯规划书前言
2014/01/09 职场文书
导游个人求职信
2014/04/25 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
项目转让协议书
2014/10/27 职场文书
2014大学班主任工作总结
2014/11/08 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
Python爬虫基础讲解之请求
2021/05/13 Python
如何利用python创作字符画
2022/06/25 Python