在項目中遇到一個問題,我們需要在一個頁面中動態加載一系列的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');
});
});
});