前提
他の方による次の質問の回答を参考にしています。
「外部からjsで動的にCDNからjsファイルを読み込む方法について」
https://teratail.com/questions/pi49k2t5q4p48y
仕様上の都合により、PHPなどのサーバーサイドの処理を使わず、JavaScriptで完結したいです。(jQuery等を使うのは構いません)
発生している問題・エラーメッセージ
(index):13 Uncaught (in promise) ReferenceError: message is not defined at (index):13:15
該当のソースコード
release.js
1const message = 'release mode'
debug.js
1const message = 'debug mode'
index.html
1<script> 2window.addEventListener('load',async()=>{ 3 const mode = 'debug' 4 let src = 'release.js'; 5 if (mode == 'debug') { 6 src = 'debug.js' 7 } 8 const script=Object.assign(document.createElement('script'),{ 9 src:window.URL.createObjectURL(new Blob([await fetch(src).then(res=>res.text())])) 10 }); 11 document.head.insertBefore(script,document.head.querySelector('script')); 12 //await (async (ms) => new Promise(resolve => setTimeout(resolve, ms)))(1000) 13 console.log(message) // ここでエラーが発生 14}); 15</script> 16<button onclick="console.log(message)">click</button>
試したこと
1.ボタンをクリックする。
2.console.log() の上のコメントを解除して1秒待つ。
どちらでも「debug mode」と正常に出力されるので、読み込むJavaScriptが実行される前にconsole.log()が実行されるのが原因だと思われます。
ボタンクリックのようにユーザーの操作を待つのは論外として、動的に読み込みたいJavaScriptが多数あるため一定時間待つ方法も避けたいです。
補足情報(FW/ツールのバージョンなど)
Windows10 Pro
Chrome 108.0.5359.126

回答1件
あなたの回答
tips
プレビュー