Comment inclure un fichier JavaScript dans un autre fichier JavaScript ?
Dans le langage JavaScript, il n'est pas possible d'importer un script. Les scripts sont seulement importés dans une page web via la balise <script>. Ce sera bientôt possible lorsque la nouvelle version ES6 du langage JavaScript sera entièrement supportée par les navigateurs. En attendant, il existe des alternatives pour charger dynamiquement un fichier JavaScript.
La méthode la plus simple consiste à effectuer un appel AJAX pour charger le script puis à interpréter son contenu avec la fonction eval(). Cette méthode est la plus directe mais elle est limitée uniquement au domaine où est située la page et elle peut être détournée pour interpréter du code malveillant.
Si vous utilisez la librairie jQuery, cette dernière fournit directement une fonction qui effectue l'appel AJAX et l'interprétation du code : la fonction getScript() :
$.getScript(mon_script_a_inclure.js, function(){
alert(La script a bien été chargé.);
});
Une autre solution consiste à ajouter dynamiquement une balise <script> dans la page. Cette solution présente plusieurs avantages : elle fonctionne avec un domaine différent de celui sur lequel est située la page et le navigateur interprète le script dès qu'il est chargé.
//Création de la balise var js = document.createElement(script); js.type = text/javascript; js.src = mon_script_a_inclure.js ; //Ajout de la balise dans la page document.body.appendChild(js);
Le problème de cette méthode est que le script est chargé de manière asynchrone, c'est-à-dire que le code situé après la dernière directive s'exécute pendant que le script est téléchargé par le navigateur. Cela peut donc entraîner des erreurs si une directive nécessite du code JavaScript présent dans le script appelé. Pour corriger ce problème, il faut ajouter une fonction que l'on lie à l'évènement de chargement du script. Le code est ainsi exécuté quand le script est entièrement chargé.
//Création de la balise var js = document.createElement(script); js.type = text/javascript; js.src = mon_script_a_inclure.js ;
On lie la fonction contenant notre code au chargement du script appelé par la balise. Deux directives sont utilisées afin que le code soit compatible avec tous les navigateurs.
js.onreadystatechange = monNouveauCode;
js.onload = monNouveauCode;
//Ajout de la balise dans la page
document.body.appendChild(js);
var monNouveauCode = function()
{
//Le code présent ici sera exécuté lorsque le script aura été entièrement téléchargé
};