Booking Engines und E-Commerce Widgets mit Iframe-Technik sind recht schnell eingebaut; eine fixe Fenstergröße definieren – und schon geht's. Aber was passiert, wenn das Angebot variabler wird und die Länge, Produktbeschreibungen oder eingebetteten Bilder mit dem ursprünglichen Layout nichts mehr zu tun haben? Die Dinge werden unschön!
Oftmals werden White Label Booking Engines oder Open Source E-Commerce-Lösungen einfach in eine bestehende Seite per iFrame eingebunden. Das geht schnell beim Einbauen. Es ist ein Element und alles sollte sich in diesem Rahmen abspielen.
Weiterentwicklung der Logik
Das war zwar in der Theorie und in der Vergangenheit einfach und nett. Das stammt aus der Zeit, als es noch derartige Sätze zu lesen gab:
"Seite optimiert für Internet Explorer 6.x oder höher, für eine Bildschirmauflösung von 1024x768 Pixel."
Jedoch entwickelten sich die E-Commerce-Lösungen weiter, integrierten Produktbilder und brachten weitere Felder und Texte mit sich. Reichte vor Jahren noch eine Liste im Excel-Tabellen-Look, so ist heute ein schön gestyltes Listing mit juicy Buttons, die zum Klicken animieren sollen, Pflicht.
Und dann kam iOS, iPad und OS X Lion
Jegliche seitliche und vertikale Scrollbars werden in den Offscreen-Bereich verbannt. Scrollbars wurden sehr dezent, nur noch als visueller Hinweis während des Scrollens. Oder im Neusprech: "geswiped". Das ist bei OS X Lion eine richtige Umgewöhnung.
Nach kurzer Zeit hat man sich aber daran gewöhnt.
Bis man auf Seiten mit Insite Scrolling stößt.
Was ist das eigentliche Problem?
Scrollen und Content mit variabler Länge. Kann das der iFrame denn nicht?
Das sorgt nun für etwas Verwirrung, da die Scrollbars nicht gefunden werden.
Was sind die Alternativen?
Man löst derartige Probleme heutzutage serverseitig, indem man den "Fremd"-Content beim Seitenaufbau einbindet. Das ist etwas aufwendiger und manchmal technisch sowie kaufmännisch nicht sinnvoll. Das macht man meist am Server mit PHP, Perl oder Rails.
JavaScript to the Rescue
JavaScript-Widgets per JSONP, Umgang mit den Daten im DOM der Host-Seite.
