Jump to the content

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

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プロパティに設定することで正常に動作させることが出来ます。

    参考

    注目記事

    最近の記事

    ぼくが書いてます

    フロントエンドエンジニア

    イソップ

    ページの先頭に戻る

    Search results

    ×