Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
113
Help us understand the problem. What is going on with this article?

More than 5 years have passed since last update.

@w650

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
113
Help us understand the problem. What is going on with this article?