web-dev-qa-db-ja.com

スクリプトタグでonloadイベントを発生させようとしています

一連のスクリプトを順番に読み込もうとしていますが、onloadイベントが発生していません。

    var scripts = [
        '//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js',
        '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.min.js',
        MK.Host+'/templates/templates.js'
    ];

    function loadScripts(scripts){
        var script = scripts.shift();
        var el = document.createElement('script');
        el.src = script;
        el.onload = function(script){
            console.log(script + ' loaded!');
            if (scripts.length) {
                loadScripts(scripts);
            }
            else {
                console.log('run app');
                MK.init();
            }
        };

        $body.append(el);
    }

    loadScripts(scripts);

JQueryを使用して要素をDOMに追加すると、el.onloadなどのネイティブイベントは発生しません。ネイティブdocument.body.appendChild(el)を使用すると、期待どおりに起動します。

javascriptjqueryonload
85
chovy

src属性を設定する必要がありますafteronloadイベント、f.ex：

el.onload = function() { //...
el.src = script;

また、onloadイベントをアタッチする前に、DOMにスクリプトを追加する必要がありますbefore：

$body.append(el);
el.onload = function() { //...
el.src = script;

IEサポートについてはreadystateを確認する必要があることに注意してください。 jQueryを使用している場合は、getScript()メソッドを試すこともできます。 http://api.jquery.com/jQuery.getScript/

121
David Hellsing