手机
当前位置:查字典教程网 >编程开发 >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的9种继承实现方式归纳

JavaScript检测字符串中是否含有html标签实现方法

用JavaScript实现对话框的教程

JavaScript函数使用的基本教程

javascript 动态添加表格行

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

JavaScript检测鼠标移动方向的方法

javascript的函数第1/3页

编写高质量JavaScript代码的基本要点

JavaScript实现斗地主游戏的思路

精品推荐
分类导航