在appendChild上沒有加載Jquery腳本

Question

我正在使用此代碼動態加載我的腳本文件，

<script type="text/javascript">
  var newscript = document.createElement('script');
  newscript.type = 'text/javascript';
  newscript.src = '../static/js/jquery.js';
  document.getElementsByClassName('container')[0].appendChild(newscript);

  var newscript = document.createElement('script');
  newscript.type = 'text/javascript';
  newscript.src = '../static/js/report_app.js';
  document.getElementsByClassName('container')[0].appendChild(newscript);

</script>

它會拋出錯誤，

Reference error: $ is not defined 

在report_app.js 。

我想，在解析下一個文件report_app.js時，必須將jquery.js腳本加載到DOM中。

但錯誤顯示， jquery.js未執行。 如何確保在運行下一個腳本文件之前加載一個腳本文件？

Answer 1

這是因為腳本是異步添加的，您可以使用onload回調

function addScript(path, callback) {
    var newscript = document.createElement('script');
    newscript.type = 'text/javascript';
    newscript.src = path;
    newscript.onload = callback;
    document.body.appendChild(newscript);

}

addScript('http://code.jquery.com/jquery-1.11.2.js', function () {
    addScript('../static/js/report_app.js');
})

演示： 小提琴