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使用技巧精萃[代码非常实用]
Nov 21 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JS实现点击按钮后框架内载入不同网页的方法
May 05 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
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的配置文件php.ini
2006/10/09 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
深入php数据采集的详解
2013/06/02 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
ThinkPHP实现简单登陆功能
2017/04/28 PHP
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
jquery实现无刷新验证码的简单实例
2016/05/19 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
2016/06/13 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
React-Native左右联动List的示例代码
2017/09/21 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
Python完全新手教程
2007/02/08 Python
Python的函数嵌套的使用方法
2014/01/24 Python
Python实现获取域名所用服务器的真实IP
2015/10/25 Python
python+django快速实现文件上传
2016/10/24 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
对Python多线程读写文件加锁的实例详解
2019/01/14 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
新闻专业应届生求职信
2013/10/31 职场文书
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
计划生育个人总结
2015/03/02 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
MySQL 表空间碎片的概念及相关问题解决
2021/05/07 MySQL
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL