HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

1. Dynamisches Laden von Skripten

Mit der wachsenden Nachfrage nach Websites steigt allmählich auch die Nachfrage nach Skripten. Wir müssen zu viele JS-Skripte einführen und die Leistung der gesamten Site reduzieren, daher entstand das Konzept dynamischer Skripte, um die entsprechenden Skripte zum richtigen Zeitpunkt zu laden.
Beispiel: Wir möchten die Erkennungsdatei einführen, wenn wir den Browser erkennen müssen.

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
fenster.onload = funktion(){
Alarm (Typ der Browsererkennung);
}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
loadScript('browserdetect.js'); //Setze das geladene js
}
Funktion loadScript(url) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
script.src = URL;
//document.head.appendChild(script); //document.head bedeutet <head>
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script>Dynamische Ausführung von js</p> <p>
<Skripttyp="text/javascript">
fenster.onload = funktion(){

}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
var text = document.createTextNode("alert('Lee')"); //IE6,7,8 Browser melden einen Fehler
script.appendChild(text);
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script>Die Browser IE 6, 7 und 8 betrachten Skripts als spezielles Element und können nicht auf untergeordnete Knoten zugreifen. Aus Kompatibilitätsgründen kann stattdessen das Textattribut verwendet werden. </p> <p>
<Skripttyp="text/javascript">
fenster.onload = funktion(){

}
var flag = true; //Auf true setzen und dann laden
wenn (Flagge) {
var Skript = Dokument.createElement('Skript');
script.type = "text/javascript";
script.text = "alert('Lee')";
script.appendChild(text);
document.getElementsByTagName('Kopf')[0].appendChild(Skript);
}
</script> Muss mit allen Browsern kompatibel sein

2. Stile dynamisch laden

Um Stylesheets dynamisch zu laden, beispielsweise beim Wechseln von Website-Skins. Es gibt zwei Möglichkeiten, ein Stylesheet zu laden: eine ist das <link>-Tag und die andere ist das <style>-Tag.

Dynamische Ausführunglink

Code kopieren

Der Code lautet wie folgt:

varflag = wahr;
wenn (Flagge) {
: Laden Sie Styles('basic.css');
}
Funktion loadStyles(url) {
var link = document.createElement('link');link.rel = 'Stylesheet';
link.typ = "text/css";
link.href = URL;
document.getElementsByTagName('head')[0].appendChild(link);
}

Dynamischer Ausführungsstil

Code kopieren

Der Code lautet wie folgt:

<Skripttyp="text/javascript">
varflag = wahr;
wenn (Flagge) {
var Stil = document.createElement('Stil');
Stil.Typ = "Text/CSS";
//var box = document.createTextNode('#box{background:red}'); // IE6,7,8 wird nicht unterstützt
//Stil.AnhängenUntergeordnetesElement(Box);
document.getElementsByTagName('Kopf')[0].appendChild(Stil);
insertRule(document.styleSheets[0], '#box', 'Hintergrund:rot', 0);
}
Funktion insertRule(Blatt, SelektorText, CSSText, Position) {
//Wenn es nicht IE6,7,8 ist
wenn (Blatt.Regel einfügen) {
Blatt.InsertRule(SelectorText + "{" + cssText + "}", Position);
//Wenn es IE6,7,8 ist
} sonst wenn (sheet.addRule) {
sheet.addRule(SelektorText, CSSText, Position);
}
}
</Skript>

<<: CSS zum Erzielen des Skeleton Screen-Effekts

>>: Layui implementiert den Bestätigungscode der Anmeldeschnittstelle

So erstellen Sie ein neues Image basierend auf einem vorhandenen Image in Docker

HTML lädt dynamisch CSS-Stile und JS-Skripte – Beispiel

So erstellen Sie ein neues Image basierend auf einem vorhandenen Image in Docker

Vue+Element UI realisiert die Kapselung von Dropdown-Menüs

Detailliertes Tutorial zur Installation von MySQL unter WINDOWS

So erstellen, starten und stoppen Sie einen Docker-Container

Einführung in die Verwendung des Base-Link-Tags Base

Detailliertes Tutorial zur Installation von PHP und Nginx auf Centos7

SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

Die v-for-Direktive in Vue vervollständigt die Listendarstellung

So löschen Sie node_modules und installieren es neu

Detaillierte Erläuterung der Platzhalter für die Webentwicklung in JS-Zeichenfolgenverkettung und der Conlose-Objekt-API

Artikel empfehlen

Berechnung des Prozentwerts, wenn die CSS-Positionseigenschaft absolut ist

Beispielcode für die Codevorlage für die Linux C-Protokollausgabe

Einführung in den Prozess zum Erstellen eigener FTP- und SFTP-Server

Neulinge lernen schnell die Schritte zum Erstellen von Website-Symbolen

Das WeChat Mini-Programm nutzt Simultanübersetzung zur Implementierung der Spracherkennung

Implementierung der QR-Code-Scanfunktion über Vue

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Detaillierte Konfiguration von Nginx, das sowohl Http als auch Https unterstützt

Detaillierte Erläuterung der FTP-Umgebungskonfigurationslösung (vsftpd)

IIS-Konfiguration des Win Server 2019-Servers und einfache Veröffentlichung der Website

Analyse des Prinzips der Verwendung von PDO zur Verhinderung von SQL-Injection

Die Verwendung von setState in React und die Verwendung von synchron und asynchron

Lösung für das Problem, dass der Windows Server 2008 R2-Server ohne Grund automatisch neu gestartet wird

Das Textarea-Tag kann nicht in der Größe geändert und nicht mit der Maus gezogen werden

Docker-Container-Protokollanalyse