HTML dynamisches Laden, CSS-Stil und JS-Skriptbeispiel_HTML/Xhtml

1. 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.

Code kopieren Der Code lautet wie folgt: 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 document.getElementsByTagName ('head ')[0].appendChild(script); } Dynamische Ausführung von js

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); } 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.

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); } 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 -Tag und die andere ist das -Tag.

Dynamischer Ausführungslink

Code kopieren Der Code lautet wie folgt: 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

Code kopieren Der Code lautet wie folgt: 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); } }

HTML dynamisches Laden, CSS-Stil und JS-Skriptbeispiel_HTML/Xhtml_Webseitenproduktion