JavaScript动态插入script的基本思路及实现函数
更新时间：2013年11月11日 17:33:21 作者：
偶尔需要动态插入javascript代码的需求，基本思路是动态创建一个script标签，设置其src属性，type属性等，需要的朋友可以参考下
在日常的前端开发中，偶尔有需要动态插入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');
});
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');
});
您可能感兴趣的文章:
- 基于js里调用函数时,函数名带括号和不带括号的区别
- javascript获取函数名称、函数参数、对象属性名称的代码实例
- js函数名与form表单元素同名冲突的问题
- js类中获取外部函数名的方法与代码
- js类中获取外部函数名的方法
- 关于动态执行代码(js的Eval)实例详解
- javascript中动态函数用法实例分析
- JS函数实现动态添加CSS样式表文件
- 如何实现动态删除javascript函数
- JavaScript 动态添加脚本，并触发回调函数的实现代码
- 如何用JavaScript动态呼叫函数(两种方式)
- JS动态插入并立即执行回调函数的方法
- 详解js的事件处理函数和动态创建html标记方法
- javascript实现根据函数名称字符串动态执行函数的方法示例
相关文章
这篇文章主要介绍了JavaScript 字符串常用操作的知识,包括字符串截取，查找类的方法，对js字符串操作相关知识感兴趣的朋友一起学习吧2016-11-11
这篇文章主要介绍了JS箭头函数和常规函数之间的区别,结合实例形式分析了JS箭头函数和常规函数之间的 5 个区别与相关使用注意事项,需要的朋友可以参考下2020-05-05
JavaScript中随机数方法 Math.random()
这篇文章主要介绍了JavaScript中随机数方法 Math.random()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-06-06
这篇文章主要介绍了JS实现DOM删除节点操作,结合实例形式分析了javascript使用removeChild()操作页面dom节点删除功能的相关实现技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Web3.js查询以太币和代币余额以及转账,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-09-09
今天小编就为大家分享一篇layui.tree组件的使用以及搜索节点功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了js中的异步获取到的数据到底能不能赋值给一个全局变量问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了JavaScript屏蔽Backspace键的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-11-11
这篇文章介绍了验证手机号码的JS方法，有需要的朋友可以参考一下2013-09-09
这篇文章主要为大家详细2022-09-09
介绍了微信小程序实现小型计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最新评论