Web-Frontend
HTML-Tutorial
HTML dynamisches Laden, CSS-Stil und JS-Skriptbeispiel_HTML/Xhtml_Webseitenproduktion
HTML dynamisches Laden, CSS-Stil und JS-Skriptbeispiel_HTML/Xhtml_Webseitenproduktion
May 16, 2016 pm 04:38 PM1. Dynamisches Ladeskript
Da die Nachfrage nach der Website steigt, steigt auch allmählich die Nachfrage nach Skripten. Wir mussten zu viele JS-Skripte einführen und die Leistung der gesamten Website reduzieren, sodass das Konzept dynamischer Skripte entstand, um die entsprechenden Skripte zum richtigen Zeitpunkt zu laden.
Zum Beispiel: Wir möchten die Erkennungsdatei einführen, wenn wir den Browser erkennen müssen.
<script type=" text/javascript ">
window.onload = function(){
alarm(typeof BrowserDetect);
}
var flag = true; //Setze true und lade dann
if ( flag) {
loadScript('browserdetect.js'); //Geladene js festlegen
}
function loadScript(url) {
var script = document.createElement('script');
script. type = 'text/javascript';
script.src = url;
//document.head.appendChild(script); //document.head bedeutet <head>
document.getElementsByTagName ('head ')[0].appendChild(script);
}
</script>Dynamische Ausführung von js</p> <p>
<script type="text/javascript">
window.onload = function(){
}
var flag = true; //Erneut auf true setzen Load
if (flag) {
var script = document.createElement('script');
script.type = 'text/javascript';
var text = document.createTextNode("alert( 'Lee')"); //IE6,7,8 Browserfehler
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>IE 6-, 7- und 8-Browser betrachten Skripte als spezielles Element und können nicht auf untergeordnete Knoten zugreifen. Aus Kompatibilitätsgründen kann stattdessen das Textattribut verwendet werden. </p> <p>
<script type="text/javascript">
window.onload = function(){
}
var flag = true; //Erneut auf true setzen Load
if (flag) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.text = "alert('Lee' )";
script.appendChild(text);
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>Erforderlich für alle kompatibelen Browser
2. Stile dynamisch laden
Um Stylesheets dynamisch zu laden, z. B. beim Wechseln von Website-Skins. Es gibt zwei Möglichkeiten, Stylesheets zu laden, eine ist das <link>-Tag und die andere ist das <style>-Tag.
Dynamischer Ausführungslink
var flag = true;
if (flag) {
loadStyles('basic.css');
}
function loadStyles(url) {
var link = document.createElement('link');link.rel = 'stylesheet ';
link.type = 'text/css';
link.href = url;
document.getElementsByTagName('head')[0].appendChild(link);
}
Dynamische Umsetzung des Stils
<script type=" text/javascript ">
var flag = true;
if (flag) {
var style = document.createElement('style');
style.type = 'text/css';
//var box= document.createTextNode('#box{background:red}');// IE6,7,8 unterstützt kein
//style.appendChild(box);
Dokument. getElementsByTagName('head ')[0].appendChild(style);
insertRule(document.styleSheets[0], '#box', 'background:red', 0);
}
Funktion insertRule (sheet, selectorText , cssText, position) {
//Wenn es nicht IE6,7,8 ist
if (sheet.insertRule) {
sheet.insertRule(selectorText "{" cssText "}", position);
//Wenn es IE6,7,8 ist
} else if (sheet.addRule) {
sheet.addRule(selectorText, cssText, position);
}
}
</script> ;
Heißer Artikel
Hot-Tools-Tags
Heißer Artikel
Heiße Artikel -Tags
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Mar 04, 2025 pm 12:32 PM
Schwierigkeiten bei der Aktualisierung der Zwischenspeicherung offizieller Konto -Webseiten: Wie vermeiden Sie den alten Cache, der sich auf die Benutzererfahrung nach der Versionsaktualisierung auswirkt?
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Mar 17, 2025 pm 12:27 PM
Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Mar 04, 2025 pm 02:39 PM
Wie füge ich PNG -Bildern auf Webseiten effizient Schlaganfalleffekte hinzu?
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Was ist der Zweck des & lt; datalist & gt; Element?
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Was ist der Zweck des & lt; Meter & gt; Element?
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Mar 17, 2025 pm 12:20 PM
Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Was ist der Zweck des & lt; Fortschritts & gt; Element?
