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

izwell

于 2018-11-21 18:07:52 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签：脚本动态按顺序加载

本文链接：https://blog.youkuaiyun.com/MessageBox_/article/details/84327460

javascript 专栏收录该内容

47 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天同事遇到一个需求，就是需要动态加载的脚本按顺序依次加载执行。尝试了使用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哟！！！