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让IE浏览器event对象符合W3C DOM标准
Nov 24 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
Vue中的v-cloak使用解读
Mar 27 Javascript
vue.js移动端app实战1:初始配置详解
Jul 24 Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
Node.js创建一个Express服务的方法详解
Jan 06 Javascript
vue实现移动端返回顶部
Oct 12 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实现Socket服务器的代码
2008/04/03 PHP
php intval的测试代码发现问题
2008/07/27 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
2014/05/08 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
JavaScript判断浏览器版本的方法
2019/11/03 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python获取时间戳代码实例
2019/09/24 Python
详解Flask前后端分离项目案例
2020/07/24 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
大学生党课思想汇报
2013/12/29 职场文书
大学生求职信范文
2014/05/24 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
政审证明范文
2015/06/19 职场文书