手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >JavaScript动态插入script的基本思路及实现函数
JavaScript动态插入script的基本思路及实现函数
摘要:在日常的前端开发中,偶尔有需要动态插入javascript代码的需求,基本思路是:1、动态创建一个script标签,设置其src属性,typ...

在日常的前端开发中,偶尔有需要动态插入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动态插入script的基本思路及实现函数】相关文章:

JavaScript函数使用的基本教程

JavaScript里实用的原生API汇总

JavaScript实现斗地主游戏的思路

javascript元素动态创建实现方法

JS动画效果打开、关闭层的实现方法

JavaScript深度复制(deep clone)的实现方法

JavaScript基于setTimeout实现计数的方法

JavaScript中的函数嵌套使用

JavaScript实现带标题的图片轮播特效

JavaScript 预解析的原理及实现

精品推荐
分类导航