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

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

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

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

Häufige JavaScript-Speicherfehler und Lösungen

Mehrere Methoden zum Implementieren von zwei festen Spalten und einer adaptiven Spalte in CSS

Detaillierte Schritte und Methoden zur Problemlösung zur Installation von MySQL 8.0.19 unter Linux

mysql 8.0.18 mgr-Installation und seine Umschaltfunktion

Font Treasure House 50 exquisite kostenlose englische Schriftartenressourcen Teil 1

So richten Sie den Ziellink eines Tags auf ein Iframe

Der Unterschied zwischen this.$router und this.$route in Vue und der push()-Methode

Nginx-Server fügt benutzerdefinierte Systemd-Dienstprozessanalyse hinzu

Beinhaltet der %-Wert im neu erstellten MySQL-Benutzer localhost?

Artikel empfehlen

Das WeChat-Applet realisiert die Chatroom-Funktion

So implementieren Sie Festplattenmounting-, Partitionierungs- und Kapazitätserweiterungsvorgänge unter Linux

Docker ändert die Konfigurationsinformationen eines nicht gestarteten Containers

Detaillierte Untersuchung der Verwendung der Positionierung in CSS (Zusammenfassung)

Analyse der Implementierung der MySQL-Anweisungssperre

MySQL-Triggersyntax und Anwendungsbeispiele

Implementierung der Docker-Bereitstellung von ElasticSearch und ElasticSearch-Head

Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)

Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)

Code zum Aktivieren von IE8 im IE7-Kompatibilitätsmodus

Einfache Methode zur Installation von MySQL unter Linux

So ändern Sie Port 3389 des Remotedesktops von Windows Server 2008 R2

Einige gängige CSS-Layouts (Zusammenfassung)