Anonymous0001: document.write schreibt Inhalt ungewollt

Es war schwierig eine passende Überschrift zu finden...

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:

<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?

Kurioserweise kann ich das Problem umgehen indem ich jene Zeilen einfach weglasse:

<script type="text/javascript">document.write("--></script>

So funktioniert alles wie gewollt und selbst auf diese Weise wird das html validiert...

Ich traue mich totz diverser Browsertests nicht diesen Code zu verwenden, zumindest nicht ohne zu verstehen, was da vor sich geht ;)

Hängt es mit den kommentarzeichen selbst zusammen?
Ich gehe aktuell davon aus.

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

  1. ...entschuldigt die Fehler im Satzbau ;)

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

    1. Hallo Sven,

      danke, dass Du Dir die Zeit genommen hast. Leider habe ich mich wohl unglücklich augedrückt. Die Slimbox läuft perfekt, das css dafür soll ohnehin direkt geladen werden.

      Alternativ dazu habe ich eine Lightbox für css geschrieben, die nahezu gleich aussieht und gleich funktioniert, nur eben ohne Effeckte. Diese wird nur mittels "noscript" aktiv, wenn JavaScript deaktviert ist. Das html muss ohnehin immer mitgeladen werden, doch das css würde ich gerne ausklammern, da es nur mitgeladen werden muss, wenn es benötigt wird.

      Da noscript im head (zumindest bei html 4) nicht erlaubt ist, kommt das nicht in Frage.

      Mein Ansatz war die Stylesheet-Einbindung per Kommentarzeichen zu unterbinden - und das per JavaAnweisung.

      Es funktioniert bereits alles wie gewollt. Ich suche nur nach einem Weg die Stylesheets nicht mitzuladen, wenn sie nicht benötigt werden.

      Irgendetwas mit Java einzubinden hilft da leider nicht, da es ja gerade nur für den noscript-Fall benötigt wird.

      Ansonsten muss ich mit den 2,5k eben Leben. ;)

      1. @@Anonymous0001:

        nuqneH

        Alternativ dazu habe ich eine Lightbox für css geschrieben, die nahezu gleich aussieht und gleich funktioniert, nur eben ohne Effeckte. Diese wird nur mittels "noscript" aktiv, wenn JavaScript deaktviert ist. Das html muss ohnehin immer mitgeladen werden, doch das css würde ich gerne ausklammern, da es nur mitgeladen werden muss, wenn es benötigt wird.

        Hm, um 2,5 kB sparen willst du einen eventuellen zusätzlichen HTTP-Request inkaufnehmen?

        Schreibe die CSS-Regeln für die Lightbox mit in das _eine_ Stylysheet, und es ward gut.

        Qapla'

        --
        Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)
        1. Schreibe die CSS-Regeln für die Lightbox mit in das _eine_ Stylysheet, und es ward gut.

          Qapla'

          Das war ja ohnehin schon die Ausgangssituation ;)

          Egal. Das Thema hat sich inzwischen gegessen, nachdem ich die Tomaten von den Augen gnommen hatte... ;)

          Die css-lightbox wird nur mittels no-script aufgerufen, dann aber für die Ausführung eine neue html-Datei geöffnet. Die zusätzlichen stylesheets sind erst da eingebunden. Die slimbox2-JS-Nutzer werden also von den 2,5 k verschont.

    2. @@Sven Rautenberg:

      nuqneH

      Sprich: Dynamisch onload ein zusätzliches Style-Element in den Body tun, was das CSS nachlädt.

      Das style-Element gehört nicht in den body, sondern in den head.

      Mit jQuery lässt sich das ja recht simpel realisieren.

      Ohne auch. Auch macht es wenig Sinn, jQuery zu laden, um anderswo 2,5 kB zu sparen.

      Qapla'

      --
      Wer möchte nicht lieber durch Glück dümmer als durch Schaden klüger werden? (Salvador Dalí)