Cet article introduit principalement deux méthodes pour charger dynamiquement les fichiers JavaScript. Les amis intéressés peuvent y faire référence.
Le premier consiste à utiliser la méthode AJAX pour charger le code de fichier de script de l'arrière-plan au premier plan, puis implémenter le code du contenu chargé via EVAL (). Le deuxième type consiste à créer une balise de script, à configurer son attribut SRC et à charger JS en insérant la balise de script dans la tête de la page, ce qui équivaut à écrire un <script src = "..."> </cript> dans la tête, mais cette balise de script est créée à l'aide de JS SRC.
Par exemple, si nous voulons charger un callbakc.js dynamiquement, nous avons besoin d'une balise de script:
Le code est le suivant: Copiez le code comme suit: <script type = "text / javascript" src = "call.js"> </ script>
Le code suivant est de savoir 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 y appeler les méthodes. Cependant, après en-tête.APPEndChild (script), nous ne pouvons pas appeler JS immédiatement. Parce que le navigateur charge ce js de manière asynchrone, nous ne savons pas quand il sera chargé. Cependant, nous pouvons juger si Helper.js se charge en écoutant des é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ée dans IE, tandis que Onload est pris en charge par Gecko, le navigateur et l'opérateur WebKit. En fait, ce.readystate == 'complet' ne fonctionne pas très bien. Théoriquement, les changements d'état sont les suivants:
1.
2. Téléchargement
3. Télélé
4.Interactif
5 majusteur
Mais certains États seront ignorés. Selon l'expérience dans IE7, vous ne pouvez obtenir que l'une des charges et terminées, et elle ne peut pas apparaître les deux. La raison peut être que vous déterminez si la lecture de Cache affecte le changement de l'État ou d'autres raisons. Il est préférable de modifier la condition de jugement en ce.readystate == 'chargé' || this.readystate == 'complet'
Se référant à l'implémentation de jQuery, nous l'avons finalement implémenté comme suit: 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 === "chargé" || this.readystate == "" complet ") {help (); // Gire la fuite de mémoire dans ie script.onload = script.onreadystateChange = null; }}; script.src = 'helper.js'; head.appendChild (script);Il existe une autre situation simple que vous pouvez écrire l'appel pour aider () à la fin de Helper.js, afin que vous puissiez vous assurer que l'aide () peut être automatiquement appelée après que Helper.js est chargé. Bien sûr, en fin de compte, cela ne convient pas à votre application.
Remarque également:
1. Étant donné que la balise de script SRC peut accéder aux ressources entre les domaines, cette méthode peut simuler Ajax et résoudre le problème de l'accès au domaine croisé AJAX.
2. Si le code HTML renvoyé avec AJAX contient un script, l'insertion du script dans HTML directement dans le DOM avec InnerHTML ne peut pas faire fonctionner le script en HTML. J'ai jeté un regard approximatif sur le code d'origine de jQuery (). HTML (HTML). JQuery analyse également les paramètres passés, élimine le code de script dedans et crée des balises de script dynamiquement. La méthode HTML utilisée par jQuery est ajoutée au DOM HTML s'il contient le script, il peut être exécuté. comme:
La copie de code est la suivante: jQuery ("# contenu"). Html ("<script> alert ('aa'); <// script>");
Ce qui précède est la méthode de chargement dynamiquement des fichiers JavaScript. J'espère que cela sera utile à l'apprentissage de tous.