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全局变量var与不var的区别深入解析
Dec 09 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
vue引用js文件的多种方式(推荐)
May 17 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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的5个入手程序
2006/11/23 PHP
ThinkPHP控制器详解
2015/07/27 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
如何快速上手Vuex
2017/02/14 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
详解Vue 单文件组件的三种写法
2020/02/19 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python splitlines使用技巧
2008/09/06 Python
windows下python安装小白入门教程
2018/09/18 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
CSS3制作苹果风格键盘特效
2015/02/26 HTML / CSS
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
支部书记四风对照材料
2014/08/28 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2015年教研工作总结
2015/05/23 职场文书
初三毕业感言
2015/07/31 职场文书
学校就业保障协议书
2019/06/24 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
nginx配置虚拟主机的详细步骤
2021/07/21 Servers