Chargement Javascript dynamiquement et comment vérifier si le script existe

L'écoute des événements sur les éléments du script n'est pas considérée comme fiable ( Source ). Une option qui vient à l'esprit est d'utiliser setTimeout() pour rechercher une variable que vous souhaitez définir dans votre script externe. Après x secondes, vous pouvez attendre votre sondage et considérer le script comme cassé.

Script externe: file.js:

 var MyLibrary = { }; 

Document principal:

 var poll; var timeout = 100; // 10 seconds timeout var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'file.js'; document.body.appendChild(script); poll = function () { setTimeout(function () { timeout--; if (typeof MyLibrary !== 'undefined') { // External file loaded } else if (timeout > 0) { poll(); } else { // External library failed to load } }, 100); }; poll(); 

C'est assez simple, Internet Explorer déclenche un événement onreadystatechange tandis que d'autres déclencheront un événement onload pour l'objet script.

 var newScript; var loadFunc = function () { alert("External Javascript File has been loaded"); }; newScript = document.createElement('script'); newScript.setAttribute('type','text/javascript'); newScript.setAttribute('src','file.js'); //IE triggers this event when the file is loaded if (elm.attachEvent) { newScript.attachEvent('onreadystatechange',function() { if (newScript.readyState == 'complete' || newScript.readyState == 'loaded') loadFunc(); }); } //Other browsers trigger this one if (newScript.addEventListener) newScript.addEventListener('load', loadFunc, false); document.getElementsByTagName('head')[0].appendChild(newScript); 

 var script = document.createElement("script"); script.type = "text/javascript"; script.src = "file.js"; 

Vous devez ajouter un rappel pour ce script.

1er: Créez le rappel:

 function callbackFn(callbackArgs) = { console.log("script is loaded with the arguments below"); console.log(callbackArgs); } 

2ème: Ajoutez un auditeur d'événement au script. Les événements de chargement et de support de Firefox et Chrome vous permettent de l'utiliser comme suit:

 script.onload = callbackFn(); 

Pour IE … Vous pouvez ajouter un auditeur d'événement pour un changement d'état comme ceci:

 script.onreadystatechange = function() { if ( this.readyState != "loaded" ) return; callbackFn(); } 

Dernière: Ajoutez le script au corps comme vous l'aviez fait.

 document.body.appendChild(script); 

Pour plus d'informations, veuillez vous référer à cet article .

Une façon serait de définir une variable dans le script que vous incluez, puis de vérifier si cette variable est définie ou non.

Dans l'événement onload, il existe des codes d'état. 200 est bon, 404, comme vous vous en souvenez, un fichier n'est pas trouvé. Utile?

Quelle bibliothèque JavaScript utilisez-vous?

Dans jQuery si vous chargez le script via Ajax, vous avez une option pour exécuter une fonction de rappel de retour (et d'autres types de rappels) …

Il existe également une fonction dédiée pour charger des scripts: $ .getScript ()