Seiteninhalt
Mein Blog
| 08.12.2009 um 14:32 <object> statt <iframe> in XHTML 1.0 Strict |
|---|
Zur Vorgeschichte:Auf meiner privaten Webseite habe ich, man glaubt es kaum, ein kleines Fotoalbum. Nun wollte ich für jedes Bild den Aufnahmeort in GoogleMaps anzeigen. Da dieses Fotoalbum aber theoretisch von jeder Seite benutzt werden kann, hätte ich nun auf der gesamten Webseite die GoogleMaps Javascripts einbinden müssen. Aus Gründen der Performance missfiel mir diese Lösung aber. Die Lösung:Gleich vorweg sei gesagt, dass ein iframe/ object in den meisten Fällen keine Lösung ist. AJAX ist hier das Stichwort. Aber in meinem Fall war dies keine Option. Für alle richtigen Browser war die Lösung ziemlich schnell gefunden. Sie sieht folgendermaßen aus. <object data="Test.html" type="text/html"> <p>Fallback</p> </object> Aber wie es nunmal so ist, hat Microsoft wieder eine Überraschung für uns. Es geht nicht. Mhh... und nun? Wieder muss Google für sinnfreie Suchanfragen stand halten. Ziemlich schnell fand sich eine scheinbare Lösung, dessen Webseite allerdings nicht erreichbar ist. Ein hoch auf Google Cache (ich könnte Geld dafür verlangen, so wie ich ständig Google erwähne) und die Lösung ward gefunden. Einen Löffel "Conditional Comments" und eine Prise "classid", kräftig umrühren, aufbacken, ausstechen, pfeffern, salzen, ziehen lassen und schon ist unser Codesalat mit leckerer Micro-Saft-Soße fertig. <!--[if IE]> <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="Test.html"> <p>Fallback</p> </object> <![endif]--> <!--[if !IE]> <--> <object data="Test.html" type="text/html"> <p>Fallback</p> </object> <!--><![endif]--> Bis hierhin funktioniert es einwandfrei in allen ordentlichen Browser, sowie in den Internet Explodierern ab Version 6. So stand es zumindest geschrieben. Nur warum mag mein IE7 diesen Brei nicht anzeigen? Ganz einfach, es fehlte ihm ein Style. Fügt man dem oberen object noch ein heiteres display:block sowie ein paar Breiten- und Höhenangaben hinzu, mag auch der IE7. So, nun haben wir unseren tollen neuen iframe... ehm... ich meine... unser tolles neues object. Aber warum zum Henker zeigt der IE wieder diesen frameborder an? Na klar, weil er ein IE ist. Und weil man ihm es nicht verboten hat. Wer nun aber denkt, er fügt dem object-tag einfach ein Attribut "frameborder" hinzu und setzt es auf "0", wird vom netten Herr Validator ziemlich unfreundlich begrüßt. Auch die lustigen Scrollbalken bekommt man nicht wie gewohnt beseitigt. <body style="border:0;overflow:visible"> Diese Stylezuweisung gehört allerdings in die Seite im iframe... ehh... object. Also in unserem Beispiel in die "Test.html". Nun fragt man sich: "Wie soll ich bitteschön in einer externen Seite solch einen Style hinterlegen". Tja dieses Problem wird uns glücklicherweise direkt aus der Hand genommen, denn externe Seiten lassen sich aus Sicherheitsgründen nicht mit dieser Methode einbinden. Vor- und Nachteile:+ XHTML 1.0 Strict Fazit:So richtig begeistert bin ich zwar nicht (wegen dem Code-Brei für den IE), aber es scheint doch eine relativ solide Lösung zu sein. Allemal besser als ein iframe. Die Nutzung dieser Methode ist allerdings dennoch Abhängig von dem jeweiligen Problemfall. Wie schon am Anfang erwähnt, ist in den meisten (nein, eigentlich fast allen) Fällen die Nutzung von AJAX zu bevorzugen. Wenn man nicht unbedingt XHTML 1.0 Strict haben möchte, wäre ein iframe wahrscheinlich sogar die einfachere Lösung, aber nicht die "Richtige" aus WebStandard-Sicht. |
| Kommentare: 1 |
 | ||
   |  |   |