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 短路法代码精简
Aug 20 Javascript
javascript下string.format函数补充
Aug 24 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
textarea 在浏览器中固定大小和禁止拖动的实现方法
Dec 03 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
js实现拖拽元素选择和删除
Aug 25 Javascript
js+cavans实现图片滑块验证
Sep 29 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 清除网页病毒的方法
2008/12/05 PHP
在PHP中使用redis
2013/11/04 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
JavaScript设计模式之代理模式介绍
2014/12/28 Javascript
探讨JavaScript语句的执行过程
2016/01/28 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
JavaScript对象原型链原理详解
2020/02/05 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python框架django基础指南
2016/09/08 Python
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
实例讲解Python爬取网页数据
2018/07/08 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
求网格中的黑点分布
2013/11/06 面试题
机械专业个人求职自荐信格式
2013/09/21 职场文书
物业招聘计划书
2014/01/10 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
《三峡》教学反思
2014/03/01 职场文书
参观接待方案
2014/03/17 职场文书
创业培训计划书
2014/05/03 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
vue 实现上传组件
2021/05/31 Vue.js