D'une manière générale, si tout le code JavaScript requis est chargé immédiatement, la page Web initiale ralentira, mais de nombreux codes chargés n'ont pas besoin d'être utilisés, et ce déchet de performances inutile doit être évité. Si vous souhaitez charger dynamiquement le code JavaScript, vous pouvez utiliser le modèle DOM pour ajouter un nœud <cript> dans le document HTML et définir l'attribut SRC de ce nœud (c'est-à-dire un fichier JavaScript de sensibilisation) sur le code JavaScript qui doit être chargé dynamiquement.
Voici un exemple de remplissage d'une telle fonction:
(1) Créer un nouveau fichier jsloadertest.html
<html xmlns = "http://www.w3.org/1999/xhtml"> <adread> <meta http-equiv = "Content-Type" Content = "Text / html; charset = gb2312" /> <itle> Exemple de chargement javascript à la demande </ title> <script = " Jsloader () {this.load = function (url) {// Obtenez toutes les <script> tags var ss = document.getElementsByTagName ("script"); // Testez si le fichier spécifié a été inclus. S'il a été inclus, déclenchez l'événement onSuccess et retournez (i = 0; i <ss.length; i ++) {if (ss [i] .src && ss [i] .src.indexof (url)! = - 1) {this.onsuccess (); retour; }} // Créer un nœud de script et définir ses attributs sur le fichier JavaScript de sensibilisation s = document.createElement ("script"); s.type = "text / javascript"; S.Src = URL; // Obtenez le nœud de tête et insérez <Script> dans var head = document.getElementsByTagName ("head") [0]; Head.ApendChild (s); // Obtenez votre propre référence var self = this; // Pour le navigateur IE, utilisez l'événement ReadyStateChange pour déterminer si la charge est réussie // Pour les autres navigateurs, utilisez l'événement Onload pour déterminer si la charge est réussie // S.Oload = S.ONReadyStateChange = function () {S.Onload = S.OnreadyStatechange = function () {// Dans cette fonction, ce point de vue de l'objet Node, pas de l'objet JS // // use pour l'objectif de soi de soi, pas de l'installation JS, ce que vous utilisez SOI-NODE, pas l'instance JS, ce que vous utilisez SOI-TOPOBLOD, pas sur l'installation js, ce que vous utilisez SOI NODOD, pas l'installation js, ce que vous utilisez SOI NODOD, pas l'installation JS, ce que vous utilisez SOI NODE, pas sur l'installation JS // / ce que vous utilisez l'objet de soi Événement sur leccess, le même ci-dessous. if (this.readystate && this.readystate == "chargement") return; self.onsuccess (); } s.onerror = function () {head.removechild (s); self.onfailure (); }}; // définir l'événement de réussite de chargement this.onsuccess = function () {}; // Définissez l'événement échoué this.onfailure = function () {}; } fonction btnclick () {// Créer l'objet var jsloader = new jsloader (); // Définissez le gestionnaire de succès de chargement jsloader.onsuccess = function () {SayHello (); } // Définir le gestionnaire de défaillance de chargement jsloader.onfailure = function () {alert ("le chargement de fichiers a échoué!"); } // Commencez à charger jsloader.load ("Hello.js"); } </ script> </ head> <body> <bablow> <input type = "soumi" name = "soumi" onClick = "javascript: btnclick ()" value = "Loading JavaScript Fichier"> </ Label> </ body> </html>(2) Créez un nouveau fichier hello.js, y compris le code suivant:
// Fonction de document JavaScript SayShello () {alert ("Hello World! Fichier JavaScript chargé avec succès"); } // javaScript documentFunction Sayshello () {alert ("Hello World! Fichier JavaScript chargé avec succès"); }