Laden Sie externe CSS- und JS-Dateien mithilfe von DOM dynamisch, um <script>- oder <link>-Tags zu erstellen und ihnen Attribute wie Typ usw. anzuhängen. Verwenden Sie dann die Methode appendChild, um das Tag an ein anderes Tag zu binden, normalerweise an <head>.
Anwendung:
1. Verbessern Sie die Wiederverwendung von Code und reduzieren Sie die Codemenge.
2. Fügen Sie einen Javascript-Controller und eine Sitzung hinzu, um den Seitenstil dynamisch zu ändern;
3. Da die Seite die Dateien nacheinander von oben nach unten lädt und sie beim Laden erläutert, können Sie einen JavaScript-Controller hinzufügen, um die Ladereihenfolge der Seitendateien zu steuern. Laden Sie beispielsweise zuerst die CSS-Layoutdatei und zeigen Sie dann die CSS-Verschönerungsdatei an mit Bildern. Laden Sie dann die große Falsh-Datei oder laden Sie sie entsprechend der Wichtigkeit des Inhalts.
Um eine .js- oder .css-Datei dynamisch zu laden, bedeutet das kurz gesagt, mit DOM-Methoden zunächst ein schickes neues „Skript“- oder „LINK“-Element zu erstellen, ihm die entsprechenden Attribute zuzuweisen und schließlich element.appendChild() zu verwenden. um das Element an der gewünschten Stelle im Dokumentbaum hinzuzufügen. Das hört sich viel ausgefallener an, als es wirklich ist:
Die nächste Aufgabe besteht darin, an das <head>-Tag zu binden. Ein Problem beim Binden besteht darin, dass dieselbe Datei möglicherweise zweimal gebunden wird. Es gibt keine Ausnahme, wenn der Browser zweimal gebunden ist, aber die Effizienz ist gering. Um diese Situation zu vermeiden, können wir eine neue globale Array-Variable hinzufügen und den Namen der gebundenen Datei darin speichern. Überprüfen Sie vor jeder Bindung, ob sie bereits vorhanden ist existiert nicht, binden Sie es.
| document.getElementsByTagName("head")[0].appendChild(fileref) |
Indem Sie zuerst auf das HEAD-Element der Seite verweisen und dann appendChild() aufrufen, bedeutet dies, dass das neu erstellte Element ganz am Ende des HEAD-Tags hinzugefügt wird. Darüber hinaus sollten Sie sich darüber im Klaren sein, dass beim Hinzufügen kein vorhandenes Element beschädigt wird neues Element – das heißt, wenn Sie „loadjscssfile(“myscript.js“, „js“) zweimal aufrufen, erhalten Sie jetzt zwei neue „script“-Elemente, die beide auf dieselbe Javascript-Datei verweisen. Dies ist nur aus einer Effizienzgesichtspunkt, da Sie der Seite redundante Elemente hinzufügen und dabei unnötigen Browserspeicher verbrauchen. Eine einfache Möglichkeit, zu verhindern, dass dieselbe Datei mehr als einmal hinzugefügt wird, besteht darin, die von loadjscssfile() hinzugefügten Dateien zu verfolgen. und laden Sie eine Datei nur, wenn sie neu ist:
| var filesadded="" //Array-Variable mit gebundenen Dateinamen speichern Funktion checkloadjscssfile(Dateiname, Dateityp){ if (filesadded.indexOf("["+filename+"]")==-1){//indexOf bestimmt, ob ein Element im Array vorhanden ist Loadjscssfile(Dateiname, Dateityp) filesadded+="["+filename+"]" //Den Dateinamen zu filesadded hinzufügen } anders alarm("Datei bereits hinzugefügt!")//Prompt, wenn sie bereits existiert } checkloadjscssfile("myscript.js", "js") //Erfolg checkloadjscssfile("myscript.js", "js") //redundante Datei, daher wird die Datei nicht hinzugefügt |
Funktion Loadjscssfile(Dateiname, Dateityp){ if (filetype=="js"){ //Bestimmen Sie den Dateityp var fileref=document.createElement('script')//Tag erstellen fileref.setAttribute("type","text/javascript")//Definieren Sie den Wert des Attributtyps als text/javascript fileref.setAttribute("src", filename)//Die Adresse der Datei } else if (filetype=="css"){ //Dateityp bestimmen var fileref=document.createElement("link") fileref.setAttribute("rel", "stylesheet") fileref.setAttribute("type", "text/css") fileref.setAttribute("href", Dateiname) } if (typeof fileref!="undefiniert") document.getElementsByTagName("head")[0].appendChild(fileref) } Loadjscssfile("myscript.js", "js") //Der Browser lädt die Datei dynamisch, wenn die Seite geöffnet wird. loadjscssfile("javascript.php", "js") // Der Browser lädt dynamisch „javascript.php“, wenn die Seite geöffnet wird. loadjscssfile("mystyle.css", "css") // Der Browser lädt die .css-Datei dynamisch, wenn die Seite geöffnet wird. |