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入门学习书籍推荐
Jun 12 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
Apr 06 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
详解vue-cli3多环境打包配置
Mar 28 Javascript
JS实现checkbox互斥(单选)功能示例
May 04 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 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 七大优势分析
2009/06/23 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
vue 避免变量赋值后双向绑定的操作
2020/11/07 Javascript
python del()函数用法
2013/03/24 Python
Python新手实现2048小游戏
2015/03/31 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
大学系主任推荐信范文
2013/12/24 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
芙蓉镇观后感
2015/06/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书