Admin/Dev

23
Juin
2017

Astuce Javascript : charger un fichier JS à la volée

Publié par sky

Après quelques astuces CCS, voici une autre astuce dédiée au Javascript qui permet de charger un fichier Javascript à la volée.

Imaginons que l'on souhaite charger un fichier "file.js" situé dans un dossier "path/to/" (bien sûr, accessible depuis l'url courante).

file = "path/to/file.js";

Le principe consiste à créer un nouveau tag Javascript et de le placer dans l'en-tête HTML de la page. Tous les navigateurs modernes prendront cet élément comme un nouvel élément à charger.

Nous allons compléter le script au fur et à mesure des explications.

Commençons par créer le nouvel nouveau tag script

file = "path/to/file.js";
tag = document.createElement('script');

Complétons le tag avec les propriétés nécessaires, comme si nous les avions écrites directement dans le HTML

file = "path/to/file.js";
tag = document.createElement('script');
tag.setAttribute("type","text/javascript");
tag.setAttribute("src", file);

Pour récupérer la balise "head", comme elle n'a pas d'ID, nous demandons au script de récupérer toutes les balises "head", comme il n'y a en qu'une nous demandons d'en récupérer la première avec l'index 0 (puisque les indexes Javascript commencent à 0), puis nous y ajoutons la balise fraîchement créée.

file = "path/to/file.js";
tag = document.createElement('script');
tag.setAttribute("type","text/javascript");
tag.setAttribute("src", file);
document.getElementsByTagName('head')[0].appendChild(tag);

Et voila, le travail est fait. Cependant, en utilisant le script tel quel, vous allez vous confronter rapidement à un problème.

En effet, le chargement du fichier n'est pas immédiat, et votre script principal va peut être faire appel à des éléments qui sont dans votre fichier à chargé alors qu'il ne l'est peut être pas complétement.

Vous pouvez choisir d'ajouter un "setTimeout", mais cela ne serait pas très joli, mais surtout pas très efficace, car selon la taille du fichier, la charge du serveur, et le délai de réponse de ce dernier la valeur de timeout peut être trop courte. Ou dans le cas contraire, si vous voyez très large, cela fera certainement attendre de trop le visiteur.

La solution est alors d'indiquer à votre script lorsque le nouveau fichier est chargé et d'executer une action à la fin du chargement. Votre script ne sera plus linéaire et nécessitera peut être un peu d'adaptation pour gérer le délai de chargement.

file = "path/to/file.js";
tag = document.createElement('script');
tag.setAttribute("type","text/javascript");
tag.setAttribute("src", file);
tag.onload = function() {
  /* executez ce que vous souhaitez ici */   alert('fichier chargé');
} document.getElementsByTagName('head')[0].appendChild(tag);

Lorsque le fichier sera chargé, le moteur Javascript lancera automatiquement ce que vous avez attaché à la propriété onload attaché au tag.

 
 
Commentaires
Aucun commentaire pour le moment.

 

Poster un commentaire
En postant sur skymac.org, je m'engage à être courtois et à ce que mon message soit pertinent avec le sujet de l'article.
En outre, j'accepte, sans condition, que mon message soit refusé et supprimé si ces règles ne sont pas appliquées.
Captcha indisponible
Pour valider le formulaire, vous devez confirmer que vous êtes bien une personne. Actuellement, la fonctionnalité est indisponible. Vous devez activer le service ReCaptcha dans le gestionnaire des cookies, et donc consentir à l'utilisation de ses cookies.
Ouvrir le panneau de gestion des cookies
Fermer le panneau
Ce site utilise des cookies pour assurer son bon fonctionnement. Il utilise aussi des cookies issues de services tiers permettant de proposer des fonctionnalités avancées. À tout moment, vous pouvez choisir quels services vous souhaitez activer ou refuser, afin de retirer votre consentement quant à l'utilisation des cookies.
 
Personnalisation des services
Vous êtes libre de choisir quels services vous souhaitez activer. En autorisant ces services tiers, vous acceptez le dépôt et la lecture de cookies et l'utilisation de technologies de suivi nécessaires à leur bon fonctionnement. En retirant votre consentement pour certains de ces services, certaines fonctionnalités du site peuvent ne plus fonctionner.
Navigation du site  En savoir plus
Le site écrit un cookie de session permettant son bon fonctionnement et aidant à la navigation. Il ne peut être désactivé.
Utilisation : 1 cookie, enregistre l'identifiant de la session.
Durée de vie : Le cookie est présent pendant toute la session sur le site. Il devient obsolète après 24 minutes d'inactivité.
Obligatoire
Popup Média
Afficher des vidéos depuis Yoube ou Dailymotion.
ReCaptcha  En savoir plus
Permet de valider que les visiteurs sont bien des humains lorsqu'ils valident des formulaires.
 
Tout accepter Tout refuser Gérer