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 相关文章推荐
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
js中split函数的使用方法说明
Dec 26 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
原生JS实现平滑回到顶部组件
Mar 16 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
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下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
功能强大的PHP图片处理类(水印、透明度、旋转)
2015/10/21 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
Bootstrap插件全集
2016/07/18 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python对字典进行排序实例
2014/09/25 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python 备份程序代码实现
2017/03/06 Python
python list排序的两种方法及实例讲解
2017/03/20 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
杭州联环马网络笔试题面试题
2013/08/04 面试题
企业面试题试卷附带答案
2015/12/20 面试题
信息专业学生学习的自我评价
2014/02/17 职场文书
心理健康活动总结
2014/04/30 职场文书
英文演讲稿开场白
2014/08/25 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
罚站检讨书
2015/01/29 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
离婚代理词范文
2015/05/23 职场文书
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL