JavaScript动态插入script的基本思路及实现函数
2013-11-11 00:00
916 查看
在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是:
1、动态创建一个script标签,设置其src属性,type属性等
2、将script节点插入页面,加载js文件
即相当于将<script type="text/javascript" src="xxx.js"></script>添加到了页面,只不过这个过程是动态完成的,为此特意封装了一个函数来实现:
使用方法如:
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'); });
相关文章推荐
- java中调JavaScript的eval() 函数实现字符串的运算(ScriptEngineManger)
- JSP中使用JavaScript动态插入删除输入框实现代码
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- JSP中使用JavaScript动态插入删除输入框实现代码
- javascript实现根据函数名称字符串动态执行函数的方法示例
- js动态删除div元素基本思路及实现代码
- JavaScript插入动态样式实现代码
- 内存动态分配函数malloc的基本实现原理
- JavaScript动态追加/删除输入框基本实现方式
- JavaScript插入动态样式实现代码
- JavaScript进阶【五】利用JavaScript实现动画的基本思路
- js动态删除div元素基本思路及实现代码
- 利用C++模板,代替虚函数实现类的静态多态性及动态继承
- Swift 函数的基本写法与使用元组实现返回多个值(四)
- 排序算法之插入算法(javascript实现)
- 动态action的基本配置及实现
- 动态表的基本实现
- javascript动态创建script标签,加载完成后调用回调
- JavaScript 中实现trim()函数