Charger dynamiquement un fichier Javascript externe et attendre son chargement - sans utiliser JQuery

Question

Je suis en train d'essayer de charger dynamiquement un fichier .js externe (selon une entrée que je reçois de l'utilisateur). Actuellement, mon code ressemble à ceci :

function createScript(src, id) {
    if (document.getElementById(id) == null) {
        var newScript = document.createElement('script');
        newScript.setAttribute("type", "text/javascript");
        newScript.setAttribute("src", src);
        newScript.setAttribute("id", id);
        document.getElementsByTagName("head")[0].appendChild(newScript);
    }
}

Cela fonctionne. Cela charge le script, mais si j'essaie d'appeler une fonction qui est définie à l'intérieur du nouveau script, cela ne fonctionnera pas. La chose étrange est que si j'attends une seconde (en utilisant un alert("test") ou quelque chose comme ça), le script fonctionne.

Je suppose que c'est parce que le navigateur ajoute immédiatement la balise </code>, mais il lui faut un peu plus de temps pour "lire" le script à l'intérieur du fichier .js. J'ai essayé de jouer avec <code>"typeof testfunction === 'function'"</code> avec quelques variations mais sans succès.</p> <p>Une bonne manière de faire cela ?</p></x-turndown>

Answer 1

Un des meilleurs motifs à utiliser ici est d'utiliser addEventListener pour écouter un événement personnalisé comme "MyScriptLoaded". Ensuite, modifiez votre script inclus pour déclencher cet événement comme dernière action. Cela vous assurera de n'agir qu'après que le nouveau script ait complètement chargé.

Answer 2

Si vous avez le contrôle sur la source du javascript qui est chargé, votre meilleure option serait d'avoir ce code exécuter une pseudo-fonction de rappel qui existe dans le contexte de votre page. C'est quelque chose comme la méthode utilisée pour le JSONP. Ainsi, imaginez sur votre page d'appel, vous avez ceci :

function createScript(src, id) {
    if (document.getElementById(id) == null) {
        var newScript = document.createElement('script');
        newScript.setAttribute("type", "text/javascript");
        newScript.setAttribute("src", src);
        newScript.setAttribute("id", id);
        document.getElementsByTagName("head")[0].appendChild(newScript);
    }
}

function callbackFunc()
{
  // utilisez de nouvelles fonctions ici....
}

Et chacun de vos fichiers sources pourrait se terminer par cette ligne :

callbackFunc();