提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript动态插入script的基本思路及实现函数

JavaScript 实现 函数 动态 插入 script 基本思路
2023-06-13 09:15:11 时间
在日常的前端开发中，偶尔有需要动态插入javascript代码的需求，基本思路是：

1、动态创建一个script标签，设置其src属性，type属性等

2、将script节点插入页面，加载js文件

即相当于将<scripttype="text/javascript"src="xxx.js"></script>添加到了页面，只不过这个过程是动态完成的，为此特意封装了一个函数来实现：
复制代码代码如下:

//动态插入script标签
functioncreateScript(url,callback){
varoScript=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及以下浏览器
varisIE=!-[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");
});

相关文章