Javascript mit CDATA korrekt in XHTML einbinden

In dem Artikel Javascript and XHTML beschreibt Stephen Chapman moderne Möglichkeiten, inline-Javascript korrekt einzubinden. Hier eine kurze Zusammenfassung seines Artikels.

Er fängt beim modernsten und eben auch korrekten Weg an, Javascript in XHTML Dokumenten als CDATA einzubinden:

<script type="text/javascript">;
<![CDATA[
  //content of your Javascript goes here
]]>
</script>

Dem Validator wird mitgeteilt, dass es sich im CDATA-Tag um Text (Character Data) handelt welcher nicht als XHTML anzusehen ist. Laut DTD wird ohne diese Angabe nämlich standardmäßig PCData angewandt, was für Parsed Character Data steht. Der Nachteil von PCDATA besteht nun darin, dass XHTML-Tags im Kontext validiert werden und man dadurch genötigt ist jedes Tag zu entwerten (z.B. per Umschreibung als &lt; für < oder per Escapen der Zeichen mit einem Backslash (\). Diese Entwertung entfällt bei der Angabe als CDATA und validiert einwandfrei.

Da nun aber einige ältere Browser dieses Tag nicht verstehen (und Javascript-Fehler werfen) wird es für sie einfach auskommentiert:

<script type="text/javascript">
/* <![CDATA[ */
  // content of your Javascript goes here
/* ]]> */
</script>

Das Dokument validiert wie gehabt, da die Kommentarzeichen für den Validator keine Bedeutung haben, und auch ältere Browser die XHTML nicht verstehen und alles als HTML parsen, interpretieren das Javascript korrekt.

Zur Veranschaulichung der besprochenen Thematik noch ein kleines Beispiel:

Wir wollen einem Element mit der id “myText” html-Code zuweisen.

<script type="text/javascript">
  $("myText").setHTML("<p>Hallo</p>");
</script>

Mit dem oben genannten Codebeispiel ohne die explizite Angabe des script-Inhalts als CDATA wird ein XHTML-Dokument nicht validieren (siehe Bild):

XHTML Elemente in einem Script-Tag sind nicht valide

Nach dem Deklarieren als CDATA validiert das Dokument.

<script type="text/javascript">
/* <![CDATA[ */
  $("myText").setHTML("<p&>Hallo</p>");
/* ]]> */
</script>

Zuletzt führt Stephen Chapman noch einen oft begangenen Fehler beim Einbinden von Javascript an:

<script type="text/javascript">
<!-- // hide from really old browsers that noone uses anymore
  // also hide from browsers that use the XHTML DTD
  // content of your Javascript goes here
// -->
</script>

Für moderne Browser und den Validator (und eben auch uralt-Browser) wird dadurch das Javascript komplett auskommentiert. Somit wird es wahrscheinlich bei einer neuen Generatoin Browser, welche sich strikt an XHTML Richtlinien hält, nicht mehr ausgeführt und sollte daher vermieden werden.

  • Abgelegt unter: JS XH
  • Erstellungsdatum: 17 Okt 2007
  • 3 Kommentare ansehen

Weitere Artikel mit dem Tag Object id #229 (auszugsweise)

Firefox - die 10 nützlichsten Addons / Plugins für Webentwickler

Da man heutzutage ja meist im Firefox entwickelt und dann CSS-Anpassungen für die anderen Browser (meist nur IE) vornimmt, möchte ich hier die wichtigsten Firefox Addons auflisten. Ohne sie kann ich mit persönlich das Entwickeln von XHTML-konformen Webseiten mit guten CSS und noch etwas Javascript nicht mehr vorstellen.
Plugins für Webentwickler

Firebug - Download bei addons.mozilla.org
Wenn man [...]


Den ganzen Beitrag lesen »

  • Abgelegt unter: FF
  • Erstellungsdatum: 5 Jun 2007
  • 1 Kommentare ansehen

mootools - “SmartTabs” : Tab-Klasse / Tabbing für semantisch korrekt ausgezeichnetes XHTML

Ich habe mit mootools 1.0 eine kleine Tab-Klasse geschrieben, welche Tabs auch aus Listen erzeugen kann, damit das XHTML semantisch korrekt bleibt und somit auch für Screenreader der Inhalt schlüssig angeordnet ist. Andere Scripts die ich bis jetzt fand, funktionierten meist überhaupt nicht, wenn Javascript ausgeschalten war oder die Überschriften und zugehörige Inhalte waren semantisch [...]


Den ganzen Beitrag lesen »

  • Abgelegt unter: MT
  • Erstellungsdatum: 4 Jun 2007
  • 2 Kommentare ansehen

Erstes größeres Typo3 Projekt online: abc-op.de

Heute launchte mein Typo3-Kundenprojekt abc-op.de.
Das in Zusammenarbeit mit final image entwickelte Projekt ging heute Nacht online und ist nun der Öffentlichkeit zugänglich.
Mit diesem Projekt habe ich mein Verständnis für Typo3 sehr gut vorangetrieben und habe mich fröhlich und aktiv in der Typo3-Mailingliste getümmelt. Vielen Dank für die Unterstützung!
Im Zuge dieses Projekts entwickelte ich an der [...]


Den ganzen Beitrag lesen »

  • Abgelegt unter: REF T3
  • Erstellungsdatum: 16 Mai 2007
  • 0 Kommentare ansehen
top top