Deux façons de charger dynamiquement des fichiers JavaScript_javascript tips

Cet article présente principalement en détail deux méthodes de chargement dynamique de fichiers JavaScript. Les amis intéressés peuvent s'y référer
. La première consiste à utiliser ajax pour charger le code du fichier script de l'arrière-plan au premier plan, puis à exécuter le code via eval() sur le contenu chargé. La seconde consiste à créer dynamiquement une balise de script, à configurer son attribut src et à charger js en insérant la balise de script dans l'en-tête de la page, ce qui équivaut à écrire un cf63513d015db02810a3e91eb1a1779664fc9c2637e24bda97d9a46d32d4a546, mais cette balise de script est créée avec une animation js
Par exemple, si nous voulons charger un callbakc.js dynamiquement, nous avons besoin d'une telle balise de script :
Le code est le suivant :

Copier le code Le code est le suivant :

9a51e31c4a84694f80202498de463c9e

Le code suivant explique comment créer cette balise via js (et l'ajouter à la tête) :
Le code est le suivant :

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script); 

Lorsque call.js est chargé, nous devons appeler les méthodes qu'il contient. Cependant, nous ne pouvons pas appeler le js immédiatement après header.appendChild(script). Étant donné que le navigateur charge ce js de manière asynchrone, nous ne savons pas quand il a fini de se charger. Cependant, nous pouvons déterminer si helper.js est chargé en écoutant les événements. (Supposons qu'il existe une méthode de rappel dans call.js) Le code est le suivant :

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

J'ai configuré 2 fonctions d'écoute d'événements car onreadystatechange est utilisé dans IE, et gecko, les navigateurs webkit et opera prennent tous en charge onload. En fait, this.readyState == 'complete' ne fonctionne pas très bien. En théorie, les changements d'état sont les suivants :
1.non initialisé
2.chargement
3.chargé
4.interactif
5.complète
Mais certains États seront ignorés. D'après l'expérience, dans IE7, un seul des fichiers chargé et terminé peut être obtenu, mais pas les deux. La raison peut être que le changement d'état affecte si la lecture à partir du cache est affectée, ou cela peut être pour d'autres raisons. Il est préférable de changer la condition de jugement en this.readyState == 'loaded' || this.readyState == 'complete'

En référence à l'implémentation de jQuery, notre implémentation finale est : Le code est le suivant :

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

Une autre situation simple consiste à écrire l'appel help() à la fin de helper.js, on peut alors garantir que help() peut être appelé automatiquement après le chargement de helper.js. Bien sûr, cela doit être comme ça. en fin de compte, ce n’est pas la bonne application pour vous.

Choses supplémentaires à noter :

1. Étant donné que le src de la balise de script peut accéder aux ressources sur plusieurs domaines, cette méthode peut simuler ajax et résoudre le problème de l'accès inter-domaines ajax.
2. Si le code HTML renvoyé par ajax contient un script, l'insertion directe de innerHTML dans le dom ne fera pas fonctionner le script dans le HTML. Après un rapide examen du code original de jQuery().html(html), jQuery analyse également d'abord les paramètres entrants, supprime le code du script et crée dynamiquement des balises de script. La méthode html jQuery est utilisée pour ajouter le code HTML dans le fichier. dom s'il contient un script est exécutable. Tel que :

Copier le code Le code est le suivant :

jQuery("#content").html("3f1c4e4b6b16bbbd69b2ee476dc4f83a alert('aa');2cacc6d41bbb37262a98f745aa00fbf0");

Ce qui précède est la méthode de chargement dynamique de fichiers JavaScript. J'espère que cela sera utile à l'apprentissage de chacun.