それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

習慣に早くから配慮した者は、おそらく人生の実りも大きい。

動的に複数script を追加したときに読み込みを待つ。Promise版（body/headに足したあと待つ）

js javascript

JS で動的ロードして関数を追加する。

適当な関数を突っ込んで、ロードされるのを待ってから、関数を使いたい。とりあえず、script.onload で解決することはわかってるんだけど。読み込みたい関数が複数だと、全部ロードされるのを待つのをコールバック・チェーンで待つのはしんどかったので、Promise.allにした。

外部JSを追加してロード待つ

document に script タグを動的に追加して、onload 関数を仕込む。それをPromiseにして、複数のURLが全部ロード終わってResolveされるまでを、Promise.all()で待つ。

function import_script( urls ){
  return Promise.all( urls.map(function(url){return new Promise(function(resolve,reject){
    var script = document.createElement('script');
    script.src = url;
    script.onload=resolve;
    document.head.appendChild(script);
  })}));
}

ロード待ってからなにかする。

import_script( ["https://example.com/example.js", "https://example.com/example2.js"] ).then(function(){
  // main 
  console.log('loaded');
 // ここにロード後に実行したい処理を書く。
})

なんでこんな事やってるのか？

「babel とか webpackでトランスパイラすりゃいいじゃん？」

違うんだ、そうじゃないんだフロント開発じゃないんだ。

Chrome拡張で、メインページにスクリプトをInjectして追加したいとか。Bookmarkletでページにスクリプトを追加してなにかやりたいとか。

そういうときに足りないライブラリや、ショートカット関数を追加したい時があるんですね。

関連資料

気づいたら、ずっとおなじようなことやってんだｗｗ私はｗｗｗ「まるで成長してない」