document.write schreibt Inhalt ungewollt

[Sven Rautenberg]

Moin!

Zur Darstelllung von Bildern auf einer Webseite nutze ich die slimbox - alternativ dazu habe ich eine Lightbox für css geschrieben. Beides funktioniert problemlos.

Die css-lightbox ist hat eine Größe von ca. 2,5k (unkomprimiert). Das ist nicht viel, dennoch wollte ich sie aus meinem regulären stylesheet ausklammern. Dazu habe ich sie in einen neuen css-File gepackt, witzlos, wenn sie immer mitgeladen wird...

Ich wollte sie mittels:

Was soll das erreichen?

<script type="text/javascript">document.write("<!--");</script>
und
<script type="text/javascript">document.write("-->");</script>

..das funktioniert. Allerdings schreibt mir die zweite Anweisung ein: die letzten Zeilen in das Dokument: ");

...warum?

Weil zuerst der HTML-Parser kommt und das HTML erkennt und parst. Und der sieht: Geöffnetes Script - das gebe ich später dem Javascript-Interpreter. Oh, ein Start eines Kommentars... ignorieren... oh ein Ende eines Kommentars... Und Hah! Das Ende vom Script. Also ab damit zum Javascript-Interpreter...

Klingt komisch, aber das Ausgeben von HTML-Elementen in Javascript "nackt" funktioniert meist nicht so, wie gewünscht, man sollte etwas Escaping mit Backslashes einfügen.

Ich glaube allerdings nicht, dass dein Code irgendwas sinnvolles tut. Die HTML-Kommentare kannst du auch statisch in den Code reintun, das würde nicht viel ändern, oder?

Außerdem unterschätzt du den Wert des Browsercaches. Es ist natürlich belastend und "zeitraubend", wenn die 2,5 KB für die Slimbox schon beim ersten Seitenaufruf geladen werden, aber danach werden sie nie mehr direkt vom Server geladen, sofern dieser korrekte Caching-Header sendet.

Weiß jemand eine bessere Lösung die stylesheets mittels js auszukommentieren?

Sie erst mit Javascript zu integrieren. Slimbox funktioniert ohne JS ja sowieso nicht, also braucht es das CSS auch nur, wenn Javascript läuft. Allerdings ist es zu spät, das CSS erst dann nachzuladen, wenn man ein Bild angucken will. Sprich: Dynamisch onload ein zusätzliches Style-Element in den Body tun, was das CSS nachlädt. Mit jQuery lässt sich das ja recht simpel realisieren.

- Sven Rautenberg