Charger dynamiquement des fichiers Javascript et charger des événements d'achèvement

Question

aujourd'hui J'ai travaillé sur le chargement dynamique de code javascript (fichiers). La solution que je l'utilise est:

function loadScript(scriptUrl) { 
     var head = document.getElementsByTagName("head")[0]; 
     var script = document.createElement('script'); 
     script.id = 'uploadScript'; 
     script.type = 'text/javascript'; 
     script.src = scriptUrl; 
     head.appendChild(script); 
    } 

le problème est que je ne sais pas comment assurez-vous que lorsque le contenu du script sont exécutées. Puisque le script contient des classes (bien classes JS), j'ai noté une fonction qui est appelée via setTimeout et vérifie si ces objets sont définis. Ce n'est pas flexible car ce n'est pas automatique. Alors? Existe-t-il des moyens de charger ces scripts et d'avoir une notification fiable quand ils ont été exécutés?

Answer 1

Le moyen le plus simple pour une bibliothèque JS est de faire un XMLHttpRequest et eval() le retour. Votre "onload" serait quand les données sont retournées, et "oninit" serait juste après que vous avez évalué.

EDIT: Si vous voulez séquencer ceci, vous pouvez créer un AssetLoader qui prend un tableau de scripts et n'évaluera pas() un script jusqu'à ce que le précédent ait été récupéré et initialisé.

EDIT 2: Vous pouvez également utiliser les commandes script.onload dans la publication référencée dans les commentaires. La méthode eval présente un léger avantage en ce sens que vous pouvez séparer et contrôler les portions de chargement et d'exécution de l'importation de script.

EDIT 3: Voici un exemple. Considérons un fichier appelé foo.js qui contient les éléments suivants:

function foo() { 
    alert('bar'); 
} 
 

Ensuite, exécutez la commande suivante d'une autre page dans votre navigateur:

function initScript (scriptString) { 
    window.eval(scriptString); 
} 

function getScript (url, loadCallback, initCallback, callbackScope) { 

    var req = new XMLHttpRequest(); 
    req.open('GET', url); 

    req.onreadystatechange = function (e) { 

     if (req.readyState == 4) { 
      if (loadCallback) loadCallback.apply(callbackScope); 
      initScript.call(null, req.responseText); 
      if (initCallback) initCallback.apply(callbackScope); 
     } 

    } 

    req.send(); 

} 

function fooScriptLoaded() { 
    alert('script loaded'); 
} 

function fooScriptInitialized() { 
    alert('script initialized'); 
    foo(); 
} 

window.onload = function() { 
    getScript('foo.js', fooScriptLoaded, fooScriptInitialized, null); 
} 

Vous verrez les alertes « script chargé », « Script initialisé ", et" barre ". Évidemment, l'implémentation de XMLHttpRequest n'est pas complète ici et il y a toutes sortes de choses que vous pouvez faire pour la portée dans laquelle vous voulez exécuter le script, mais c'est le cœur de celui-ci.

Answer 2

Vous pouvez utiliser le getScript de jquery et passer une fonction de rappel.

Voir: jquery.

Answer 3

Vous pouvez utiliser une variable compteur, et une sorte de rappel:

var scriptsToLoad = 10; 
var loadedScripts = 0; 
//... 
function increaseLoadCount() { 
loadedScripts++; 
if(loadedScripts == scriptsToLoad) { 
alert("start here"); 
} 
} 

//script1-10.js 
increaseLoadCount(); 

Peut-être un peu plus agréable que d'un délai d'attente ..