嘗試觸發腳本標記上的onload事件

Question

我試圖按順序加載一組腳本，但onload事件並未對我開火。

var scripts = [ 
     '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js', 
     '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js', 
     MK.host+'/templates/templates.js' 
    ]; 

    function loadScripts(scripts){ 
     var script = scripts.shift(); 
     var el = document.createElement('script'); 
     el.src = script; 
     el.onload = function(script){ 
      console.log(script + ' loaded!'); 
      if (scripts.length) { 
       loadScripts(scripts); 
      } 
      else { 
       console.log('run app'); 
       MK.init(); 
      } 
     }; 

     $body.append(el); 
    } 

    loadScripts(scripts); 

我猜想像el.onload這樣的本地事件在jQuery被用來追加元素到DOM時不會觸發。如果我使用原生document.body.appendChild(el)，則按預期啓動。

Answer 1

你應該後設置src屬性的onload事件，f.ex：

el.onload = function() { //... 
el.src = script; 

你也應該前的腳本追加到DOM 連接的onload事件：

$body.append(el); 
el.onload = function() { //... 
el.src = script; 

請記住，您需要檢查readystate以獲得IE支持。如果您使用的是jQuery，您也可以嘗試使用getScript()方法：http://api.jquery.com/jQuery.getScript/