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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
Sep 23 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
WebPack配置vue多页面的技巧
May 15 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
小程序红包雨的实现示例
Feb 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
php基础知识:类与对象(2) 自动加载对象
2006/12/13 PHP
php执行sql语句的写法
2009/03/10 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js实现瀑布流的三种方式比较
2020/06/28 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
parabola.js抛物线与加入购物车效果的示例代码
2017/10/25 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JS开发 富文本编辑器TinyMCE详解
2019/07/19 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
django之session与分页(实例讲解)
2017/11/13 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
一份全面的PHP面试问题考卷
2012/07/15 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
升学宴学生答谢词
2015/01/05 职场文书
党小组评议意见
2015/06/02 职场文书
安全知识竞赛主持词
2015/06/30 职场文书