動的にJSを実行する方法

jsファイルを指定したscriptタグを動的にDOMに追加する

var script = document.createElement('script');
script.src = 'http://example.com/hoge.js';
document.body.appendChild(script);

上記のように、src属性を指定してscriptタグをDOMに追加すれば、jsが実行される。

しかし、この方法でDOMに追加した場合、src属性に書かれているURLに非同期的に通信が発生し、読み込みが完了したものから実行されるため、実行の順番を確保しないといけない場合は、ただ追加すればよいわけではない。

console1.js

console.log(1);

console2.js

console.log(2);

console3.js

console.log(3);

例えば、上記のようなjsファイルを用意し、「1, 2, 3」と順番にconsoleに表示されるように実行したい場合。

var scripts = ['console1,js', 'console2.js', 'console3.js'];
var len = scripts.length;
var i = 0;

(function appendScript() {
    var script = document.createElement('script');
    script.src = scripts[i];
    document.body.appendChild(script);

    if (i++ < len) {
        script.onload = appendScript;
    }
})();

上記のように、scriptElementのonloadイベントに次のscriptを追加する処理をセットすることで、順番を確保したまま実行することが可能になる。

scriptタグにjsの文字列を書き込んでDOMに追加する

var script = document.createElement('script');
script.innerHTML = 'console.log("オラオラ")';
document.body.appendChild(script);

jsの文字列を何かしらの方法でキャッシュ等をしておけば、無駄なリクエストを減らすことも可能に。