JS脚本按顺序依次加载执行

最新推荐文章于 2025-06-25 11:06:15 发布

原创最新推荐文章于 2025-06-25 11:06:15 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#脚本动态按顺序加载

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了一种在网页中按顺序加载并执行多个外部JavaScript文件的方法。通过自定义loadScript函数，可以确保脚本按需加载，同时兼容包括IE在内的各种浏览器。此方法避免了使用document.write和defer属性的限制，提供了一种更灵活、可靠的解决方案。

今天同事遇到一个需求，就是需要动态加载的脚本按顺序依次加载执行。尝试了使用document.write(DOMContentLoaded之后不能使用该方法，且该方法不推荐使用)，使用defer=“async”(部分浏览器比较古老，不支持该属性)。最后我写了一个方法，实现脚本的按顺序加载，代码如下：

function loadScript(){
	var scriptArr =  Array.prototype.slice.apply(arguments);
	var script = document.createElement('script');
	script.type = 'text/javascript'; 
	
	var rest = scriptArr.slice(1);

	if(rest.length > 0){
		script.onload = script.onreadystatechange = function() { 
			if ( !this.readyState || this.readyState === "loaded" || 
			this.readyState === "complete" ) { 
				loadScript.apply(null, rest); 
				// Handle memory leak in IE 
				script.onload = script.onreadystatechange = null; 
			} 
		}; 	
	}					

	script.src = scriptArr[0];
	document.body.appendChild(script);
}	
loadScript('1.js','2.js','3.js');

该方法兼容IE哟！！！