Exécuter le javascript après chargement du document javascript externe

Question

Je souhaite inclure un fichier js distant, puis appeler une fonction une fois l'exécution terminée. Je pensais que je pouvais faire quelque chose comme ceci:

var sc = document.createElement('script'); 
sc.setAttribute('type', 'text/javascript'); 
sc.setAttribute('src', src); 
sc.innerHTML = "alert('testing');" 
parentNode.appendChild(sc); 

fin de compte, l'alerte (« testing ») est effacé à être tout ce qui est dans le fichier. Est-ce qu'il y a un moyen de faire ça?

Answer 1

Avez-vous essayé de créer un deuxième élément de script contenant le code que vous voulez exécuter et d'ajouter qu'après celui que vous avez ajouté celui qui doit être téléchargé?

Answer 2

Ajouter une autre section

<script></script> 

après la première devrait fonctionner. AFAIK vous ne pouvez pas mélanger JS externe et en ligne dans un tag.

Cependant, je ne suis pas sûr si le code dans "innerHTML" fonctionnera comme prévu. Je suis intéressé de voir si c'est le cas.

Answer 3

Vous pouvez utiliser l'événement de chargement sc pour savoir quand ce script a été chargé, puis effectuer une action.

exemple http://iamnoah.blogspot.com/2008/01/ie-script-load-event.html

Answer 4

J'ai créé ce script pour moi-même hier. Il utilise jQuery pour charger les fichiers JavaScript via AJAX et les ajoute dans une balise de script à l'en-tête, puis appelle une fonction de rappel que je lui transmets.

Ça a bien fonctionné pour moi.

/** 
* Fetches and executes JavaScript files from the server. 
* @param files A list of files to load, or a single filename as a string. 
* @param callback The function to call when the process is done. Passes a boolean success value as the only parameter. 
* @param thisObject The calling object for the callback. 
*/ 
window.include = function(files, callback, thisObject) { 
    var current_location = null; 
    var recursive = false; 

    if(!(thisObject instanceof Object)) { 
     thisObject = window; 
    } 

    if(files instanceof Array || files instanceof Object) { 
     if(files.length > 0) { 
      current_location = files.shift(); 
      recursive = true; 
     } 
     else { 
      callback.apply(thisObject, [true]); 
      return; 
     } 
    } 
    else if(typeof files == 'string') { 
     current_location = files; 
    } 
    else { 
     callback.apply(thisObject, [false]); 
     return; 
    } 

    if((current_location instanceof String || typeof current_location == 'string') && current_location != '') 
    { 
     $.ajax({ 
      type : 'GET', 
      url : current_location, 
      timeout : 5000, 
      success : function(data) { 
       var scriptTag = $(document.createElement('script')); 
       scriptTag.attr('type', 'text/javascript'); 
       scriptTag.html(data); 
       $('head').append(scriptTag); 

       if(recursive) { 
        window.adlib.include(files, callback, thisObject); 
       } 
       else { 
        callback.apply(thisObject, [true]); 
       } 
      }, 
      error : function() { 
       callback.apply(thisObject, [false]); 
      } 
     }); 
    } 
} 

Answer 5

La première chose à faire est d'oublier d'utiliser src et le contenu interne sur la même balise de script. Cela ne fonctionne pas d'une manière générale, bien que John Resig y ait réfléchi dans ce numéro blog post.

La deuxième chose est, décider si vous voulez charger le script synchrone ou de manière asynchrone. Si le script est volumineux ou de longue durée, vous pouvez soit le faire de manière asynchrone, soit le faire de manière synchrone en bas de la page afin de ne pas bloquer le rendu. Votre approche (balises de script ajoutant dynamiquement) la chargera et l'exécutera de manière asynchrone, ce qui signifie que le code qui doit être exécuté une fois terminé doit entrer dans un rappel qui se déclenche lorsque le script est terminé. Cette configuration n'est pas très simple, donc je suggère soit d'utiliser jQuery et sa fonction ajax.getScript, soit de simplement copier la fonctionnalité getScript directement à partir de la source jQuery (lignes 3473-3505 de jQuery 1.3.2).

Si vous voulez éviter tout cela, il suffit de le charger de manière synchrone. Ceci est fait en utilisant document.write. Votre exemple fourni ressemblerait à ceci:

document.write("<scr" + "ipt src='" + src + "' type='text/javascript'></script>"); 
// The script is guaranteed to have executed at this point 
alert('testing'); 

Assurez-vous de garder « script » divisé comme ça, je ne sais pas pourquoi mais il est une bizarrerie de JavaScript.

Answer 6

Cette fonction charger la bibliothèque de scriptPath et exécuter la fonction de gestionnaire une fois passé script est chargé:

loadExternalScript : function(scriptPath, handler) { 

    var head = document.getElementsByTagName('head')[0]; 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = scriptPath; 
    script.charset = 'utf-8'; 

    script.onload = handler; 

    head.appendChild(script); 

}