Home/Needful-Things/IFrame

Edit: Letze Änderung [ Mittwoch , der 25.03.2009 ]

Im obigen Beispiel haben wir ein simples Nachrichten Widget von Scouty.de in die Webseite eingebunden. Das Handikap dieser Technik besteht meist darin, dass die aktiven Inhalte die vom Anbieter kommen, sehr oft in eingebettete Frames <iframe>...</iframe> ausgeliefert werden.

Zwar ist der Umgang mit Iframes kinderleicht und man kann seine Webseite schnell mit interessanten Inhalten bereichern, aber in der Königsdisziplin HTML Strict ist das Inline-Element Iframe leider nicht erlaubt (deprecated). Der Quellcode ist dann nicht mehr valide! Für die moderne Datenübertragung ist heute das Inline-Element <object>...</object> vorgesehen,- dessen Funktionsinhalte - wie sollte es anders sein,- vom Internet Explorer beharrlich verweigert werden!

Um die Dienste der mittlerweile sehr zahlreich angebotenen Widgets dennoch in Anspruch nehmen zu können, betten wir speziell für den IE das veraltete IFrame in eine Browserweiche,- sogenannte Conditional Comments <!--[if IE]> Iframe für IE <![endif]--> ein und machen mit diesem kleinen Workaround die Syntax für den Validator gewissermaßen unsichtbar.

<!-- Nur IE8 oder kleiner - Ausschluss aller anderen Browser -->

<!--[if lte IE 8]>
<div id="scouty-ie">
<iframe allowtransparency="true" id="scoutyframe" name="scoutyframe" scrolling="no"
frameborder="0" border="0" src="http://www.scouty.de/widget/widget.php?c=0&amp;d=4-3">
</iframe> 
</div>
<![endif]-->

Für die moderne Browserwelt wie Firefox, Safari, Opera oder Chrome kommt dann das Object-Element <object>...</object> zum Einsatz, welches in HTML Strict für das Einbetten multimedialer Inhalte ausdrücklich empfohlen wird. Signifikant: Auch der IE8 verlangt bei dieser Art der Datenübertragung immer noch das veraltete IFrame-Element, weil es sonst zu Fehldarstellungen kommt !

<!-- Nur IE9 oder größer und alle anderen Browser - Ausschluss IE8 oder kleiner -->

<!--[if gte IE 9]><!-->
<div id="scouty-mozilla">
<object id="scouty-object" type="text/plain"
data="http://www.scouty.de/widget/widget.php?c=0&amp;d=4-3">
</object>
</div>
<!--<![endif]-->

Das Ganze wird dann noch mit ein paar Codeschnipsel C S S formatiert und schon erzeugen wir validen Code, der Validator hört auf zu meckern und alle gängigen Browser sind zufrieden.

div#scouty-ie, div#scouty-mozilla  {
  width: 216px;
  margin-left: 100px;
  }
div#scouty-ie #scoutyframe, div#scouty-mozilla #scouty-object  {
  border:  0;
  width:   216px;
  height:  231px;
  margin:  0;
  padding: 0;
  }

nach oben