J'essaie de déclencher l'événement onload sur la balise script.

Question

J'essaie de charger un ensemble de scripts dans l'ordre, mais l'événement onload ne se déclenche pas pour moi.

    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);

Je suppose que les événements natifs comme el.onload ne se déclenchent pas lorsque jQuery est utilisé pour ajouter l'élément au DOM. Si j'utilise les événements natifs document.body.appendChild(el) alors il se déclenche comme prévu.

Answer 1

Vous devez définir le src attribut après el onload événement, p.ex :

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

Vous devriez également ajouter le script au DOM avant en attachant le onload événement :

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

N'oubliez pas que vous devez vérifier readystate pour la prise en charge d'IE. Si vous utilisez jQuery, vous pouvez également essayer la fonction getScript() méthode : http://api.jquery.com/jQuery.getScript/

Answer 2

J'ai été confronté à un problème similaire, en essayant de tester si jQuery est déjà présent sur une page, et sinon de forcer son chargement, puis d'exécuter une fonction. J'ai essayé avec la solution de contournement de @David Hellsing, mais sans aucune chance pour mes besoins. En fait, le onload L'instruction a été immédiatement évaluée, puis la $ l'utilisation à l'intérieur de cette fonction n'était pas encore possible (oui, le câlin "$ n'est pas une fonction." ^^).

Je me suis donc référé à cet article : https://developer.mozilla.org/fr/docs/Web/Events/load et j'ai attaché un écouteur d'événements à mon objet script.

var script = document.createElement('script');
script.type = "text/javascript";
script.addEventListener("load", function(event) {
    console.log("script loaded :)");
    onjqloaded(); // in fact, yourstuffscript() function
});
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(script);

Pour mes besoins, cela fonctionne bien maintenant. J'espère que cela pourra aider d'autres personnes :)