手机
当前位置:查字典教程网 >编程开发 >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检测字符串中是否含有html标签实现方法

javascript瀑布流布局实现方法详解

JavaScript 预解析的原理及实现

JavaScript中的函数嵌套使用

JavaScript基于setTimeout实现计数的方法

javascript元素动态创建实现方法

JavaScript里实用的原生API汇总

用JavaScript实现对话框的教程

javascript动态设置样式style实例分析

精品推荐
分类导航