本文介绍在JavaScript中动态创建并插入script标签的方法，涵盖设置src、type及async属性。重点解析如何通过onload和onreadystatechange事件处理加载完成回调，并针对IE6-10及其他现代浏览器提供兼容性检测与实现代码。
动态插入Script标签的基本思路
在前端开发实践中，有时需要动态执行JavaScript代码，其核心逻辑如下：
首先，通过编程方式创建一个script元素，并配置其src、type等关键属性。
随后，将该script节点添加到页面DOM中，从而触发外部JS文件的加载过程。
这一过程等同于在HTML中静态添加<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');
});