Chargez dynamiquement des fichiers CSS et JS externes à l'aide de DOM pour créer des balises <script> ou <link> et leur attacher des attributs, tels que le type, etc. Utilisez ensuite la méthode appendChild pour lier la balise à une autre balise, généralement à <head>.
application:
1. Améliorer la réutilisation du code et réduire la quantité de code ;
2. Ajoutez un contrôleur et une session javascript pour modifier dynamiquement le style de la page ;
3. Étant donné que la page charge les fichiers de manière séquentielle de haut en bas et les explique lors du chargement, vous pouvez ajouter un contrôleur JavaScript pour contrôler l'ordre de chargement des fichiers de page. Par exemple, chargez d'abord le fichier de mise en page CSS, puis affichez le fichier d'embellissement CSS. avec des images. Chargez ensuite le gros fichier falsh, ou chargez-le en fonction de l'importance du contenu.
Pour charger un fichier .js ou .css de manière dynamique, en un mot, cela signifie utiliser les méthodes DOM pour créer d'abord un nouvel élément "script" ou "LINK" chic, lui attribuer les attributs appropriés et enfin utiliser element.appendChild() pour ajouter l'élément à l'emplacement souhaité dans l'arborescence du document. Cela semble beaucoup plus sophistiqué qu'il ne l'est en réalité :
Le travail suivant consiste à se lier à la balise <head>. Un problème lors de la liaison est que le même fichier peut être lié deux fois. Il n'y aura aucune exception si le navigateur est lié deux fois, mais l'efficacité sera faible. Afin d'éviter cette situation, nous pouvons ajouter une nouvelle variable de tableau globale et y enregistrer le nom du fichier lié. Avant chaque liaison, vérifiez si elle existe déjà. Si elle existe, il vous indiquera qu'elle existe déjà. n'existe pas, liez-le.
| document.getElementsByTagName("head")[0].appendChild(fileref) |
En faisant d'abord référence à l'élément HEAD de la page, puis en appelant appendChild(), cela signifie que l'élément nouvellement créé est ajouté à la toute fin de la balise HEAD. De plus, vous devez savoir qu'aucun élément existant n'est endommagé lors de l'ajout de la balise HEAD. nouvel élément - c'est-à-dire que si vous appelez loadjscssfile("myscript.js", "js") deux fois, vous vous retrouvez maintenant avec deux nouveaux éléments "script" pointant tous deux vers le même fichier Javascript. Cela ne pose problème qu'à partir d'un. du point de vue de l'efficacité, car vous ajouterez des éléments redondants à la page et utiliserez de la mémoire inutile du navigateur dans le processus. Un moyen simple d'empêcher l'ajout du même fichier plus d'une fois consiste à garder une trace des fichiers ajoutés par loadjscssfile(), et ne chargez un fichier que s'il est nouveau :
| var filesadded="" //Enregistre la variable de tableau qui a des noms de fichiers liés fonction checkloadjscssfile(nom de fichier, type de fichier){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf détermine s'il y a un élément dans le tableau loadjscssfile(nom de fichier, type de fichier) filesadded+="["+filename+"]" //Ajoute le nom du fichier aux fichiers ajoutés } autre alert("fichier déjà ajouté!")//Demander s'il existe déjà } checkloadjscssfile("myscript.js", "js") //succès checkloadjscssfile("myscript.js", "js") //fichier redondant, donc fichier non ajouté |
fonction loadjscssfile(nom de fichier, type de fichier){ if (filetype=="js"){ //Déterminer le type de fichier var fileref=document.createElement('script')//Créer une balise fileref.setAttribute("type","text/javascript")//Définir la valeur du type d'attribut comme text/javascript fileref.setAttribute("src", filename)//L'adresse du fichier } else if (filetype=="css"){ //Déterminer le type de fichier var fileref=document.createElement("lien") fileref.setAttribute("rel", "feuille de style") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", nom de fichier) } si (type de référence de fichier ! = "indéfini") document.getElementsByTagName("head")[0].appendChild(fileref) } loadjscssfile("myscript.js", "js") //Le navigateur charge dynamiquement le fichier à l'ouverture de la page. loadjscssfile("javascript.php", "js") // Le navigateur charge dynamiquement "javascript.php" à l'ouverture de la page. loadjscssfile("mystyle.css", "css") //Le navigateur charge dynamiquement le fichier .css à l'ouverture de la page. |