dave: unobtrusive Google-Maps

Hi,

auf meiner Seite wird eine Google-Maps angezeigt.
Wenn JS nicht aktiviert ist soll eine statische Karte angezeigt werden.
Im moment ist es so dass diese Karte immer eingebunden ist und per JS der body eine Klasse bekommt.
Wenn diese Klasse gesetzt ist wird das Bild der Karte über CSS ausgeblendet.

Jetzt wird das Bild aber immer geladen, auch wenn es gar nicht nötig wäre.
Wie kann ich das vermeiden?

~dave

  1. Hallo,

    auf meiner Seite wird eine Google-Maps angezeigt.
    Wenn JS nicht aktiviert ist soll eine statische Karte angezeigt werden.
    Im moment ist es so dass diese Karte immer eingebunden ist und per JS der body eine Klasse bekommt.

    wie wär's mit <http://de.selfhtml.org/html/referenz/elemente.htm#noscript@title=<noscript>>?

    Freundliche Grüße

    Vinzenz

    1. Hi,

      leider verwende ich einen XHTML-Doctype.

      ~dave

      1. Ich les grad nochmal nach, scheinbar ist noscript auch in XHTML unter bestimmten Voraussetzungen valide...

        1. Hallo,

          Ich les grad nochmal nach, scheinbar ist noscript auch in XHTML unter bestimmten Voraussetzungen valide...

          bestimmte Voraussetzungen?

          Das noscript-Element ist ein ganz normales, nicht veraltetes Element aus der DTD für XHTML 1.0 (aller Varianten).

          Freundliche Grüße

          Vinzenz

          1. Hi,

            bestimmte Voraussetzungen?

            Vermutlich bin ich einfach zu doof:

            XHTML element noscript not allowed as child of XHTML element div in this context. (Suppressing further errors from this subtree.)

            [...]  
            <body>  
              [...]  
              <div id="content">  
                <noscript><img src="..." alt="..." /></noscript>  
              </div>  
              [...]  
            </body>  
            [...]
            

            Das bedeutet ich kann das noscript-Element dann wo genau einsetzen?

            contexts in which element noscript may be used:
            In a head element of an HTML document, if there are no ancestor noscript elements.
            Where phrasing content is expected in HTML documents, if there are no ancestor noscript elements

            Welche Elemente erlauben "phrasing content"?
            (das div kann ich leider nicht weglassen)

            ~dave

            1. Hallo,

              bestimmte Voraussetzungen?

              Vermutlich bin ich einfach zu doof:

              [...]

              <noscript><img src="..." alt="..." /></noscript>
              [...]

                
              das geht in XHTML 1.0 strict genausowenig wie in HTML 4.01 strict. <noscript> muss hier unbedingt ein Blockelement enthalten. Erst dieses Kindblockelement darf inline- oder inline-replaced Elemente enthalten.  
                
              Folgendes Gerüst validiert:  
                
              ~~~html
              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
              <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
              <head>  
                  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
                  <title>Test</title>  
              </head>  
              <body>  
                  <div>  
                      <noscript>  
                          <div>Test</div>  
                      </noscript>  
                  </div>  
              </body>  
              </html>  
              
              

              Freundliche Grüße

              Vinzenz

              1. Hi,

                vielen Dank soweit.

                Ich dachte es macht keinen Unterschied ob folgender Doctype oder der eigentliche von xhtml...

                <?xml version="1.0" encoding="utf-8"?>  
                <!DOCTYPE html>  
                <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml" xml:lang="de">
                

                Zum noscript-Element bei xhtml5 konnte ich folgende Auskunft finden:
                In XHTML, the element is always parsed as a normal element, and can't really be used to stop content from being present when script is disabled.

                Weis jemand eine Lösung?

                ~dave

                1. Ich dachte es macht keinen Unterschied ob folgender Doctype oder der eigentliche von xhtml...

                  <?xml version="1.0" encoding="utf-8"?>

                  <!DOCTYPE html>
                  <html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml" xml:lang="de">

                    
                  In Bezug auf was soll es einen Unterschied machen?  
                    
                  Die DOCTYPE-Deklaration ist bei echtem XHTML/XML egal, das stimmt. Du könntest also auch einen (X)HTML5-DOCTYPE verwenden. Das ist dann aber kein strictly conforming XHTML 1.0 mehr.  
                    
                  In HTML bzw. HTML-kompatiblem XHTML ist der DOCTYPE auch nachrangig, es sollte nur einer sein, der den standardkonformen Modus anschaltet. Das gilt für verschiedene, sowohl den XHTML-1.0-DOCTYPE wie für den (X)XHTML-5-DOCTYPE.  
                    
                  
                  > Zum noscript-Element bei xhtml5 konnte ich folgende Auskunft finden:  
                  > [In XHTML, the element is always parsed as a normal element, and can't really be used to stop content from being present when script is disabled.](http://wiki.whatwg.org/wiki/HTML_vs._XHTML#Element-specific_parsing)  
                    
                  Lieferst du dein XHTML als application/xhtml+xml oder als application/xml aus oder als gewöhnliches text/html?  
                  Im ersteren Fall: Warum?  
                  Im letzteren Fall: braucht dich obiger Sachverhalt nicht zu interessieren, weil er für den ersteren Fall gilt.  
                    
                  
                  > Weis jemand eine Lösung?  
                    
                  Wahrscheinlich hast du sie schon und brauchst nichts tun.  
                    
                  Mathias
                  
                  1. Hi,

                    Lieferst du dein XHTML als application/xhtml+xml oder als application/xml aus oder als gewöhnliches text/html?

                    Ersteres.

                    Im ersteren Fall: Warum?

                    Weil ich XHTML habe und es logisch fand es als solches auszuliefern.

                    Im letzteren Fall: braucht dich obiger Sachverhalt nicht zu interessieren, weil er für den ersteren Fall gilt.

                    Ich hätte nur gerne eine valide Seite.

                    <!DOCTYPE html>  
                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">  
                    <head>  
                        <title>Test</title>  
                    </head>  
                    <body>  
                        <div>  
                            <noscript>  
                                <div>Test</div>  
                            </noscript>  
                        </div>  
                    </body>  
                    </html>
                    

                    Ist invalide.

                    Aber dann bleibt mir wohl nichts anderes als das ganze einfach als text/html auszuliefern und die Fehlermeldung zu ignorieren.
                    :-(

                    ~dave

                    1. Weil ich XHTML habe und es logisch fand es als solches auszuliefern.

                      Logisch ist das nun nicht angesichts der schlechten Browserunterstützung und der vielen Besonderheiten und Stolperfallen.

                      Aber dann bleibt mir wohl nichts anderes als das ganze einfach als text/html auszuliefern und die Fehlermeldung zu ignorieren.

                      Du hast viele Möglichkeiten. Eine wäre, den Inhalt mit JavaScript zu entfernen, wenn JavaScript aktiviert ist. Etwas anderes könnte ein XML-Parser ja auch nicht machen.

                      <div class="noscript"><p>bla</p></div>

                      (function () {  
                         var elements = document.getElementsByClassName('noscript'),  
                            element;  
                         for (var i = elements.length - 1; i >= 0; i--) {  
                            element = elements[i];  
                            element.parentNode.removeChild(element);  
                         }  
                      })();
                      

                      Mathias

                      1. Hi,

                        Du hast viele Möglichkeiten. Eine wäre, den Inhalt mit JavaScript zu entfernen, wenn JavaScript aktiviert ist. Etwas anderes könnte ein XML-Parser ja auch nicht machen.

                        Dann wird das Bild aber trotzdem geladen.
                        Auch wenn ich direkt nachdem Bild-Element ein script habe dass das Bild entfernt wird das Bild vollständig geladen.

                        Genau das wollte ich verhindern, einfach um dem Client unnützes runterladen zu ersparen (vor allem für Mobile Geräte).

                        Da man bei Eventhandler die direkt beim Element notiert werden nur den Function-Body angeben kann funktioniert das hier auch nicht wie gewünscht:
                        <img src="" alt="" id="foo" onclick="(function(){console.log(arguments);})(arguments)"/>
                        Die Funktion wird nicht sofort ausgeführt, sondern selbstverständlich erst bei click. Leider gibt es kein Event das mich hier weiter brächte.

                        Eine Idee die mir durch deinen Post noch kam wäre irgendein "Polyglot"-Gefrickel mit einer Mischung von HTML- und Javascript-Kommentaren, allerdings glaube ich nach einigen Versuchen nicht dass das möglich ist.
                        Zumal es in XHTML kein document.write() gibt.

                        Vielen Dank für deine Hilfe.

                        ~dave

                        1. Hallo dave,

                          Eine Idee die mir durch deinen Post noch kam wäre irgendein "Polyglot"-Gefrickel mit einer Mischung von HTML- und Javascript-Kommentaren, allerdings glaube ich nach einigen Versuchen nicht dass das möglich ist.

                          ich verstehe nicht, warum Du nicht einfach HTML5 oder XHTML 1.0 verwendest. Dein Problem löste sich von selbst.

                          Freundliche Grüße

                          Vinzenz

                          1. Hi,

                            ich verstehe nicht, warum Du nicht einfach HTML5 oder XHTML 1.0 verwendest. Dein Problem löste sich von selbst.

                            Ich wollte HTML5-Elemente in allen Browser auch ohne Javascript verwenden können.
                            Ich wurde bekehrt.
                            Außer mir sagt jemand eine andere Möglichkeit als diese hier.

                            ~dave