クリックしたら複数のscriptタグを追加する【JavaScript】
クリックしたタイミングでscriptタグを読み込み実行する方法のメモ。
addEventListenerで
<!-- HTML -->
<button id="クリック対象のID名">任意の文言</button>
<!-- <button id="追加対象のID名">任意の文言</button> *2の場合 -->
/**
* JavaScript
*/
document.getElementById('クリック対象のID名').addEventListener('click', function() {
let srcs = ['https://〜(外部リソースも可)','js/(追加したいファイル).js'];
for(let i=0;i<srcs.length;i++) {
let s = document.createElement('script');
s.async = false; // *1
s.src = srcs[i];
//let a = document.getElementById('追加対象のID名'); // *2
//a.appendChild(s); // *3
document.body.appendChild(s); // *4
}
});
関数化&onclickで
<!-- HTML -->
<button onclick="任意のファンクション名();">任意の文言</button>
<!-- <button id="追加対象のID名">任意の文言</button> *2の場合 -->
/**
* JavaScript
*/
function 任意のファンクション名() {
let srcs = ['https://〜(外部リソースも可)','js/(追加したいファイル).js'];
for(let i=0;i<srcs.length;i++) {
let s = document.createElement('script');
s.async = false; // *1
s.src = srcs[i];
//let a = document.getElementById('追加対象のID名'); // *2
//a.appendChild(s); // *3
document.body.appendChild(s); // *4
}
}
備考:
*1)配列の順番通りに実行するための設定
*2)任意の場所に追加するときはここで該当のID名を取得
*3)任意の場所に追加したいときはコメントオフ
*4)bodyの閉じタグ直前に追加(*3利用時は削除)
参考リンク:
・onClickで外部JavaScriptファイルを読み込む方法|teratail
・動的にJSを実行する方法|Qiita
・scriptのasync確認|CodePen
この記事は役に立ちましたか?
ぜんぜん
ヤフーに戻ります