ダイナミックスクリプトはロードコールバックを発生しません

Question

ここに私の問題の簡略化されたバージョンがあります。 loadedコールバックが起動しないのはなぜですか？私はsrcで参照することはできません - -

私の目標は、スクリプトファイル注入することである文書のheadタグの中に：

(function(module, scriptContent, loaded) { 

    if (!window[module]) { 

     var script = document.createElement('script'), 
      head = document.getElementsByTagName('head')[0]; 

     if (script.readyState) { 
      script.onreadystatechange = function() { 
       if (script.readyState === 'loaded' || script.readyState === 'complete') { 
        script.onreadystatechange = null; 
        loaded(); 
       } 
      }; 
     } else { 
      script.onload = loaded; 
     } 

     script.appendChild(document.createTextNode(scriptContent)); 
     head.appendChild(script); 
    } else { 
     loaded(); 
    } 
})('foo', 'var foo = {};', function(){ 
    console.log('loaded'); 
}); 

https://jsfiddle.net/on23j3wk/

Answer 1

インラインスクリプトを同期的に実行されているので、 readyStateを使用しないでください。

これは'console.log("b")'にご'var foo = {};'を変更し、前console.log('a')を追加することによって実証され、そしてhead.appendChild(script);後console.log('c')することができます。これらはすべてアルファベット順にログインしているか

(function(module, scriptContent, loaded) { 
 

 
    if (!window[module]) { 
 
    \t 
 
     var script = document.createElement('script'), 
 
      head = document.getElementsByTagName('head')[0]; 
 
      
 
     if (script.readyState) { 
 
      script.onreadystatechange = function() { 
 
       if (script.readyState === 'loaded' || script.readyState === 'complete') { 
 
        script.onreadystatechange = null; 
 
        loaded(); 
 
       } 
 
      }; 
 
     } else { 
 
      script.onload = loaded; 
 
     } 
 
     
 
     script.appendChild(document.createTextNode(scriptContent)); 
 
     console.log('a'); 
 
     head.appendChild(script); 
 
     console.log('c'); 
 
    } else { 
 
     loaded(); 
 
    } 
 
})('foo', 'console.log("b")', function(){ 
 
\t console.log('loaded'); 
 
});

注意。
挿入されたスクリプトが非同期にロードされた場合、それを作成したコールスタックが最初に終了し、 "b"の前に "a"と "c"が記録されます。

つまり、head.appendChild(script);の直後にloaded()と電話することができます。