jsを用いて動的にscriptを読み込む際の注意点
javascriptを用いて動的にscriptを読み込む際、ハマってしまったのでメモしておきます。
やりたいこと
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script_with_jquery.js"></script>
</head>上記のように、head内でscriptを読み込むサイトがあるとします。
ページによっては使用しないスクリプトがあるので、これらのスクリプトをjavascriptで動的に読み込むように改良したいというわけ。
ポイントは2つのjsファイルに依存関係があること。
今回は、script_with_jquery.jsというファイルはjquery.min.jsに依存している。
大元のコード
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script_with_jquery.js"></script>
</head>これは正しく動作します。
しっかりjqueryを読み込んだ後に、script_with_jquery.jsを読み込んでいるので大丈夫です。
動きそうで動かないコード
<head>
<script>
var head = document.getElementsByTagName('head')[0];
var script1 = document.createElement("script");
script1.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
head.appendChild( script1 );
var script2 = document.createElement("script");
script2.src = 'script_with_jquery.js';
head.appendChild( script2 );
</script>
</head>私は、上記のようなコードを書いて、期待通りに動かなくて頭を悩ませました。
一見動きそうに見えませんか？（運が良ければ動きます。）
javascriptにて、scriptを動的に生成しています。
依存関係を守るため、先にjqueryの方をappendChildして、その後、script_with_jquery.jsをappendChildしています。
なぜ動かないかというと、、、
javascriptを用いて動的に読み込む際に非同期通信が発生する
はい。というわけです。落ち着いて考えてみれば当然のことなのですが。。。
つまり、javascriptを用いてscriptをappendChildした場合、そのscriptが完全に読み込まれる前に次の行の処理に移行してしまう。
ということは、順番通りにappendChildしても、その順番通りにscriptが読み込まれるとは限らないということです。（運よくjavascriptのダウンロードと展開が次の行のjavascriptよりも先に完了すれば、正常に動作してしまいます。）
ではどうするか？（動くコード）
そこで、以下のように改良します。
<head>
<script>
var head = document.getElementsByTagName('head')[0];
var script1 = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
var script2 = 'script_with_jquery.js';
var script_src_list = [ script1, script2 ];
var script_idx = 0;
function execute_scripts() {
var script = document.createElement("script");
script.src = script_src_list[ script_idx ];
head.appendChild( script );
if ( ++script_idx < script_src_list.length ) {
script.onload = execute_scripts;
}
}
execute_scripts();
</script>
</head>javascriptにて生成したscriptに、onload関数を指定します。
onload関数で、1つ目のscriptがロードされたら、2つ目のscriptを読み込みを実行する。という動作を実現しています。
これで、無事依存関係を崩さずにscriptを動的に読み込むことが可能となりました。
これで頭を悩ませてる人、私だけでしょうか・・・？
以上、jsを用いて動的にscriptを読み込む際の注意点についてでした。
関連記事
python requestsを用いたjsonのGET, POST通信
pythonのrequestsモジュールを用いて、phpとデータをやりとりする方法について。 私は、GET通信で記述していた内容をPOST通信に書き換える際に、丸3日ほどハマってしまいました。皆さんは私のようにハマりませんように。。。 GET通信 GET通信はURLパラメータに情報を付与 […]
iOS13にてjavascriptのdevicemotionを取得する
iphone向けのwebコンテンツ制作の際に、javascriptを用いてiphoneの加速度や回転速度を取得したいと思ったことが合ったのですが、iOS13ではdevicemotion, deviceorientationイベントを取得する際にちょっとした工夫が必要になります。 その方法 […]
webページでドラッグ操作。jquery-uiを使う。
web開発において、ドラッグ操作したい場面に遭遇しました。その際に、jquery-uiというドラッグ操作に対応したライブラリがあることを知ったので、使い方をここに書き留めていこうと思います。 どういうことがしたいのか。。。 webページにおいて、ドラッグ&ドロップでリストに順次追 […]