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を読み込む際の注意点についてでした。
関連記事
chromedriverとgoogle chromeのバージョン合わせ
python×selenium×chromedriverでwebスクレイピングを行う機会があり、chromedriverとgoogle chromeのバージョン合わせをすることに。chromedriverを使う際には、google chromeとバーションをうまく合わせないとエラーが吐か […]
python requestsを用いたjsonのGET, POST通信
pythonのrequestsモジュールを用いて、phpとデータをやりとりする方法について。 私は、GET通信で記述していた内容をPOST通信に書き換える際に、丸3日ほどハマってしまいました。皆さんは私のようにハマりませんように。。。 GET通信 GET通信はURLパラメータに情報を付与 […]
iOS13にてjavascriptのdevicemotionを取得する
iphone向けのwebコンテンツ制作の際に、javascriptを用いてiphoneの加速度や回転速度を取得したいと思ったことが合ったのですが、iOS13ではdevicemotion, deviceorientationイベントを取得する際にちょっとした工夫が必要になります。 その方法 […]