動的にjsを導入する際の順序について
1309 ワード
プロジェクトの中で一つの問題が発生したら、一つのページの中で一連のjsを動的にロードし、jsのロード順序を規定する必要があります.最初はjsを引用する方法は以下の通りです.
http://www.w3help.org/zh-cn/causes/BX9013
解決方法は文書で説明したように、最後に以下の方法で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');
});
});
});