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 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JS版网站风格切换实例代码
Oct 06 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
Jun 09 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP也可以?成Shell Script
2006/10/09 PHP
php模拟post上传图片实现代码
2016/06/24 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
PHP7导出Excel报ERR_EMPTY_RESPONSE解决方法
2019/04/16 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
新手快速学习JavaScript免费教程资源汇总
2015/06/25 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
在Linux下调试Python代码的各种方法
2015/04/17 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
在python中bool函数的取值方法
2018/11/01 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
关于多元线性回归分析——Python&amp;SPSS
2020/02/24 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
专科毕业生学习生活的自我评价
2013/10/26 职场文书
文明餐桌活动方案
2014/02/11 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
平面设计专业求职信
2014/08/09 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
开会通知
2015/04/20 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书