動的にJavaScriptを読み込む

Tweet

Category JavaScript 2021/07/05

問題

状況に応じて、動的にJavaScriptを読み込みたいです。

答え

jQueryが使えるとき

$.getScript('https://～～～～')

これ1行でOK。

読み込んだ後に何かしてほしいときは、コールバックを指定。

$.getScript('https://～～～～', function(){ /* コールバック */ })

$.getScript('https://～～～～').done(function(){ /* コールバック */ })

素のJavaScriptのとき

script要素を作って、srcを設定して、どこかにappendする。

var script = document.createElement('script');
script.src = something;
document.head.appendChild(script);

var script = document.createElement('script');
script.onload = function () {
    // ロード後何かしてほしいとき
};
script.src = something;
document.head.appendChild(script);

以下もOK。

最初に登場するscript要素の前に追加する。

var script = document.createElement( 'script' );
script.src = 'https://～～～';
var s = document.getElementsByTagName( 'script' )[ 0 ];
firstScript.parentNode.insertBefore( script, s );

なお、読み込みタイミングは非同期となる。

jQueryを使って、同期で読み込む

同期のajaxで読み込んでscriptタグに入れてその場で実行。

$.ajax({
  url: "～～～",
  dataType: 'script',
  async:false
});

jQueryを使わないで、同期で読み込む

同期のajaxで読み込んでscriptタグに入れてその場で実行。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/softel-system/www/system/index.php/assets/js/es6-promise.auto.js', false);
xhr.send(null);

if (xhr.status === 200) {
  var script = document.createElement('script');
  script.text = xhr.responseText;
  document.head.appendChild(script);
}