JavaScriptファイルの動的読み込みと完了状態を取得する

外部JSファイルの動的読み込み

外部JSファイルを任意のタイミングで読み込みたいとき、scriptタグを生成してdocumentに追加すればロードしてくれます。

function loadScript(src, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = src;
    head.appendChild(script);

    callback();
}

loadScript("path/to/script.js", function() {
    console.log('script loaded');
});

ただし、読込みが終わった順に実行されるため、
上記の様にコールバック関数を設定しても追加したスクリプトよりも先にコールバックが実行されてしまいます。

そこで、scriptを読み込み完了後にコールバックが実行されるように修正します。

function loadScript(src, callback) {
    var done = false;
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = src;
    head.appendChild(script);
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
                this.readyState === "loaded" || this.readyState === "complete") ) {
            done = true;
            callback();
            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            if ( head && script.parentNode ) {
                head.removeChild( script );
            }
        }
    };
}

loadScript("path/to/script.js", function() {
    console.log('script loaded');
});

script.onload にコールバックを設定してもいいのですが、IE8以下で正しく動作しません。
script.onreadystatechange のreadyStateプロパティを監視してコールバックを設定することでIEでも正常に動作させることが出来ます。

scriptタグの中に文字列を追加して動的に実行

var scripts = [
    "console.log(1);",
    "console.log(2);",
    "console.log(3);",
    "console.log(4);"
];
var head = document.getElementsByTagName('head')[0];

for (var i = 0, l = scripts.length; i < l; i++) {
    var script = document.createElement('script');
    script.text = scripts[i];
    head.appendChild(script);
}

script.innerHTMLではなくてscript.textな点がミソ。
こちらもIE8以下ではinnerHTMLは正しく動かず、代わりにtextプロパティに設定することで正常に動作させることが出来ます。

参考

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.