Valid xhtml 1.0 strict JS Toggle ohne spekulativen Parsing-Fehler

Ich weiß, dass es viele toggle-Skripte gibt, aber ich konnte keine finden, die meinen Bedürfnissen entsprechen. Es sollte sein:Valid xhtml 1.0 strict JS Toggle ohne spekulativen Parsing-Fehler

gültig XHTML 1.0 Strict
valides CSS 2.1/functional für Browser ohne zureichende CSS 3
sichtbar für Benutzer ohne Javascript (nur sichtbar ... kein Toggle)
don‘ t verursacht einen spekulativen Parsing-Fehler (Firefox/Gecko-Konsole)
wenn möglich nicht über eine ganze Script lädt von irgendwo nur für diese winzige Umschaltfunktion

Spekulativer Parsing-Fehler tritt auf, wenn in einem JavaScript-Abschnitt unvollständige HTML-Codes geschrieben werden (z. Tag nicht geschlossen).

dieses Beispiel sehen, welche Fehler spekulative Parsing verursacht und flackernden Inhalt beim Laden:

function toggle(ID) {  \t 
 
\t var ele = document.getElementById(ID); 
 
\t 
 
\t if(ele.style.display == "block") { 
 
\t \t \t ele.style.display = "none"; } 
 
\t else { 
 
\t \t \t ele.style.display = "block"; } 
 
}

<a href="javascript:toggle('content')">Content Toggle Linktext</a> 
 

 
<script type="text/javascript"> 
 
\t /* <![CDATA[ */ 
 
\t document.write('<div id="content" style="display:none;">'); 
 
\t /* ]]> */ 
 
</script> 
 

 
<p>Content blablabla</p> 
 

 
<script type="text/javascript"> 
 
\t /* <![CDATA[ */ 
 
\t document.write('<\/div>'); 
 
\t /* ]]> */ 
 
</script>

So wie meine Bedürfnisse zu erreichen? Vielleicht brauche ich einen komplett neuen Ansatz? Danke, Stony

Quelle

2016-04-05 Stony

Dieser warum veraltet wurde genau ist document.write. Sie sollten 'if (etwas) container.innerHTML = (complete div); else container.innerHTML = (nur das p); 'in einem monolithischen JavaScript-Block. –

Ich habe es noch nicht versucht, aber habe ich Recht, dass in diesem Fall der Inhalt für Benutzer ohne Javascript nicht angezeigt wird, weil das ganze Skript nicht ausgeführt wird, aber der Inhalt im Skript ist? Ich bin ein JS Anfänger ... – Stony

Danke trotzdem für den Hinweis auf _document.write_. – Stony

Ok ich denke, ich habe eine Lösung von mir gefunden bei this blog comment, die im Moment sehr gut funktioniert und macht das HTML viel einfacher zu lesen. Das Skript wird in die Kopfzeile geladen.

/* JavaScript */ 
function toggle(ID) { 
    var ele = document.getElementById(ID); 

    if (ele.style.display === "block") { 
      ele.style.display = "none"; } 
    else { 
      ele.style.display = "block"; } 
} 

document.documentElement.className += " CssClassJsLoad"; 
// writes the classname "CssClassJsLoad" into the <html>-tag to make sure document is completely loaded by browser before parsing starts

/* CSS */ 
.CssClassJsLoad .JsHide { 
    display:none; } 
/* For all objects within both of these classes: Do not display. 
Remember: the <html>-tag only gets the class "CssClassJsLoad" if JS is present or respectively successfully executed. So if JS is not present, display will be standard as "block" element */

<!-- HTML --> 
<a id="content-link" href="javascript:toggle('content')">Content Toggle Linktext</a> 

<div class="JsHide" id="content"> 
    <p>Content Text blablabla. Inherits class "JsHide" from surrounding div and "CssClassJsLoad" from surrounding html-tag</p> 
</div>

Quelle

2016-04-05 18:26:15 Stony

Valid xhtml 1.0 strict JS Toggle ohne spekulativen Parsing-Fehler

Antwort

Verwandte Themen