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 日期常用的方法
Nov 11 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
javascript鼠标滑动评分控件完整实例
May 13 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
相册展示PhotoSwipe.js插件实现
Aug 25 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue配置nprogress实现页面顶部进度条
Sep 21 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
JavaScript 语句之常用 for 循环详解
Mar 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
详解no input file specified 三种解决方法
2019/11/29 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
使用JavaScript开发IE浏览器本地插件实例
2015/02/18 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
JQuery中Ajax的操作完整例子
2017/03/07 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
行政副总岗位职责
2014/02/23 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
道德之星事迹材料
2014/05/03 职场文书
出国英文推荐信
2014/05/10 职场文书
扬尘污染防治方案
2014/06/15 职场文书
环保证明
2015/06/23 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android
JavaScript 定时器详情
2021/11/11 Javascript
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Pillow图像处理库安装及使用
2022/04/12 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Java存储没有重复元素的数组
2022/04/29 Java/Android
利用Python实现模拟登录知乎
2022/05/25 Python