動的にscript を追加したときに読み込みを待つ（body の最後とかheadに足したあと待つ）

動的に script タグを書き出したとき

関数が欲しくて、あとでチョコっとScriptを書き出すJSを書いたときに、そのスクリプトがロードされるのを待つ。

スクリプトがロードされないと使いたい関数がロードされないもんね。

onload でできた

意外にシンプルな解決策で解決したわ。

サンプルコード

var src_url = 'http://example.com/example.jp'
var load_func = function(){
  console.log("loaded")
}

(function(src_url, callback){
  document.body.appendChild(function(src_url, callback) {
    var u = new URL(src_url);
    sc = document.createElement("script");
    sc.type = "text/javascript";
    sc.src = u.toString();
    sc.onload = callback;
    return sc;
  }(src_url,callback));
})(src_url, load_func );

もっと、then() とか promise 使おうかと思ったけど、すごく簡単に解決したのでこれで良い。

2019/05/16 追記

ロードが１つだけってことはないので、複数のscript url をロードするようにPromiseに仕立て直した。

http://takuya-1st.hatenablog.jp/entry/2019/05/16/194721