在项目中遇到一个问题,我们需要在一个页面中动态加载一系列的js,并且要求规定js的加载顺序,一开始我们的引用js的方法如下:
<script type="text/javascript">
var js = document.createElement("script");
js.src = '***.js';
js.type = "text/javascript";
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(js);
</script>
但是发现导入多个js时,它们的加载顺序并不一定按照导入顺序,先导入的js可能后被加载。详细分析可以参考:
http://www.w3help.org/zh-cn/causes/BX9013
解决方法如参考文档中所述,最后采用下面方法保证js顺序:
function loadJS(url, success) {
var domScript = document.createElement('script');
domScript.src = url;
success = success || function(){};
domScript.onload = domScript.onreadystatechange = function() {
if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
success();
this.onload = this.onreadystatechange = null;
this.parentNode.removeChild(this);
}
}
document.getElementsByTagName('head')[0].appendChild(domScript);
// 先监听事件,然后在加脚本
}
//执行加载外部 JS 文件
loadJS('a.js',function (){
loadJS('b.js',function (){
loadJS('c.js',function (){
alert('ok');
});
});
});