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 相关文章推荐
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
jQuery插件formValidator实现表单验证
May 23 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
jQuery过滤选择器用法示例
Sep 12 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Vue项目实现简单的权限控制管理功能
Jul 17 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 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开发大型项目的一点经验
2006/10/09 PHP
php 图片上传类代码
2009/07/17 PHP
php如何调用webservice应用介绍
2012/11/24 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
简介JavaScript中toTimeString()方法的使用
2015/06/12 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
JavaScript仿百度图片浏览效果
2016/11/23 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue.js使用代理和使用Nginx来解决跨域的问题
2018/02/03 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python实现将一个数组逆序输出的方法
2018/06/25 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
清明节扫墓活动方案
2014/03/02 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python