本文介绍如何在JavaScript中动态创建script元素并判断加载状态。通过利用IE的readyState和非IE浏览器的onload事件，实现串行与并行两种加载模式，并在所有脚本加载完成后执行指定的回调函数，解决依赖加载时序问题。
JS动态脚本加载与回调机制
在Web开发中，经常需要处理脚本加载完成后再执行特定任务的场景。许多开发者不清楚如何准确判断JS文件是否加载完毕，若未加载完成就调用其中的函数，会导致执行失败。本文将详细讲解如何在JS文件成功加载后执行相应的回调任务。
基本思路
我们可以通过动态创建 <script> 元素，并修改其 src 属性来加载脚本。关键在于如何判断脚本加载完成，因为部分函数必须在脚本加载后才能调用。在 IE 浏览器中，可以利用 <script> 元素的 onreadystatechange 事件监控加载状态变化，通过检测 readyState 为 loaded 或 complete 来确定加载完成。对于非 IE 浏览器，则可以直接使用 onload 事件来判断脚本是否加载完毕。
动态脚本加载实现
动态脚本简单示例
一个基本的实现流程如下：
// IE下：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onreadystatechange = function() {
if(this.readyState === 'loaded' || this.readyState === 'complete') {
console.log('加载成功！')
}
}
script.setAttribute('src', src)
HEAD.appendChild(script)
// Chrome等现代浏览器：
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var src = 'http://xxxxxx.com'
var script = document.createElement('script')
script.setAttribute('type','text/javascript')
script.onload = function() {
console.log('加载成功!')
}
script.setAttribute('src', src)
HEAD.appendChild(script)基于上述原理，我们对代码进行封装，将其分为两个函数：串行加载和并行加载。
串行与并行加载策略
串行和并行动态脚本
当传入包含多个JS文件路径的数组时，串行加载函数会从第一个脚本开始，每成功加载一个便立即加载下一个，直到全部加载完成后执行回调函数。而并行加载则是在初始阶段同时加载所有脚本文件，即它们从同一时刻开始加载，待全部加载完成后统一执行回调函数。
/**
* 串行加载指定的脚本
* 串行加载[异步]逐个加载，每个加载完成后加载下一个
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function seriesLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var last = scripts.length - 1;
//递归
var recursiveLoad = function(i) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(i !== last) {
recursiveLoad(i + 1);
} else if (typeof(callback) === 'function') {
callback()
};
}
}
// 同步
s[i].setAttribute('src', scripts[i]);
HEAD.appendChild(s[i]);
};
recursiveLoad(0);
}
/**
* 并行加载指定的脚本
* 并行加载[同步]同时加载，不管上个是否加载完成，直接加载全部
* 全部加载完成后执行回调
* @param {Array|String} scripts 指定要加载的脚本
* @param {Function} callback 成功后回调的函数
* @return {Array} 所有生成的脚本元素对象数组
*/
function parallelLoadScripts(scripts, callback) {
if(typeof(scripts) !== 'object') {
var scripts = [scripts];
}
var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
var s = [];
var loaded = 0;
for(var i = 0; i < scripts.length; i++) {
s[i] = document.createElement('script');
s[i].setAttribute('type','text/javascript');
// Attach handlers for all browsers
// 异步
s[i].onload = s[i].onreadystatechange = function() {
if(!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
loaded++;
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
if(loaded === scripts.length && typeof(callback) === 'function') callback();
}
};
// 同步
s[i].setAttribute('src',scripts[i]);
HEAD.appendChild(s[i]);
}
}在此实现中，<script> 标签被动态插入到页面的 <head> 标签内部，并且在加载完成后，该标签元素会被自动移除。
使用示例
使用方法
这里声明了一个数组变量，其中包含两个远程JS文件的地址（需要注意的是，<script> 标签调用脚本支持跨域）：
var scripts = [
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
"http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];
// 这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
// 然后你可以使用下面的方法调用并在成功后执行回调了。
parallelLoadScripts(scripts, function() {
/*
debug = new $.debug({
posTo : { x:'right', y:'bottom' },
width: '480px',
height: '50%',
itemDivider : '<hr>',
listDOM : 'all'
});
*/
console.log('脚本加载完成啦');
});总结
以上介绍了JS脚本加载后执行相应回调函数的操作方法，希望能对大家有所帮助。如有疑问，欢迎留言，小编会及时回复。感谢大家对本站的支持！