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

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

Artikel empfehlen

Lassen Sie uns ausführlich über die Requisitenattribute von Komponenten in Vue sprechen

Inhaltsverzeichnis Frage 1: Wie werden Requisiten...

So implementieren Sie Vue Page Jump

1. dies.$router.push() 1. Ansicht <Vorlage>...

Beispiel für die Implementierung einer eingebetteten Tabelle mit vue+elementUI

Während meines Praktikums im letzten Studienjahr ...

Vue3 verwendet Axios Interceptor zum Drucken von Front-End-Protokollen

Inhaltsverzeichnis 1. Einleitung 2. Verwenden Sie...

Ubuntu 19.10 aktiviert SSH-Dienst (detaillierter Prozess)

Ich habe mehr als eine Stunde gebraucht, um SSH i...

Detaillierte Erläuterung von vite + ts zum schnellen Erstellen von Vue3-Projekten und zur Einführung verwandter Funktionen

Inhaltsverzeichnis vite Bauen Konfiguration vite....

Beispielanalyse der drei Verbindungsmethoden für virtuelle VMware-Maschinen

NAT Auf diese Weise wird die Netzwerkkarte der vi...

Gerätetreiber des Linux-Kernels – Zusammenfassung der grundlegenden Hinweise zum Linux-Kernel

1. Mechanismus des Linux-Kernel-Treibermoduls Sta...

Verwendung des SerialPort-Moduls in Node.js

Inhaltsverzeichnis Zweck Modulinstallation Grundl...

Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial

Einführung in CentOS CentOS ist eine Linux-Distri...

Docker-Compose-Installationsmethode für die YML-Dateikonfiguration

Inhaltsverzeichnis 1. Offline-Installation 2. Onl...

Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]

Dieser Artikel beschreibt die Linux-Benutzer- und...

Detaillierter Implementierungsplan für den Vue-Frontend-Export von Excel-Dateien

Inhaltsverzeichnis 1. Technologieauswahl 2. Techn...

Eine detaillierte Einführung in die Neugestaltung der Weibo-Komponente auf der Website (Bilder und Text)

Vorne geschrieben Weibo-Komponenten sind Komponen...

So installieren und speichern Sie die PostgreSQL-Datenbank in Docker

Überspringen Sie die Docker-Installationsschritte...