LoginSignup
122

More than 5 years have passed since last update.

posted at

updated at

動的に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の文字列を何かしらの方法でキャッシュ等をしておけば、無駄なリクエストを減らすことも可能に。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
122