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表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
Jul 22 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
javascript实现摄像头拍照预览
Sep 30 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编写大型网站问题集
2007/03/06 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
又十个超级有用的PHP代码片段
2015/09/24 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
2013/02/01 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
Django内容增加富文本功能的实例
2017/10/17 Python
在python中按照特定顺序访问字典的方法详解
2018/12/14 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
阿玛尼意大利官网:Armani意大利
2018/10/30 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
护士自我介绍信
2014/01/13 职场文书
cf收人广告词
2014/03/14 职场文书
协议书的格式
2014/04/23 职场文书
说谎欺骗人检讨书300字
2014/11/18 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
数据库之SQL技巧整理案例
2021/07/07 SQL Server
MySQL索引失效场景及解决方案
2022/07/23 MySQL