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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
使用原生JS实现弹出层特效
Dec 22 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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中的内存管理,PHP动态分配和释放内存
2013/06/28 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
jquery插件 cluetip 关键词注释
2010/01/12 Javascript
Lazy Load 延迟加载图片的jQuery插件中文使用文档
2012/10/18 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript实现窗口抖动效果
2016/10/19 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
python中如何使用insert函数
2020/01/09 Python
Python批量启动多线程代码实例
2020/02/18 Python
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
社区党总支书记先进事迹材料
2014/01/24 职场文书
教师节活动主持词
2014/04/02 职场文书
2014年教师节活动总结
2014/08/29 职场文书
投标承诺函格式
2015/01/21 职场文书
OpenCV 图像梯度的实现方法
2021/07/25 Python