Dynamische Größenanpassung bei einem IFrame mit Https-Inhalt
Zur Integration von Web-Anwendungen stellen sich IFrames immer noch als ein adäquates Mittel dar, denn sie sind äußerst einfach anzuwenden und stellen an die beteiligten Systeme denkbar geringe Anforderungen.
Ein Nachteil von IFrames ist aber, dass sie keine dynamische Höhen- oder Breitenanpassung auf ihren Inhalt mittels CSS erlauben. Hierfür ist man dann auf den Einsatz von Javascript angewiesen.
Ganz besonders knifflig ist dass dann, wenn das IFrame-Dokument (ich meine das, welches innerhalb des IFrames zur Darstellung kommt) HTTPS erfordert, das äußere Dokument (das Dokument mit dem IFrame-Element) hingegen HTTP benutzt. In diesem Fall hat keines der beteiligten Dokumente Zugriff auf das DOM des anderen, so dass eine direkte Javascript-Manipulation hier nicht möglich ist. Das selbe gilt auch für den Fall, dass die Dokumente aus unterschiedlichen, sich nicht gegenseitig vertrauenden Domains stammen.
Lösung: Ein HTTP-Call-Back-Request. Wie das geht, steht im Artikel...
Der HTTP-Call-Back-Request
Die Geometrie des IFrame-Inhaltes kennt nur das im IFrame dargestellte Dokument selbst. Das IFrame-Element, dessen Höhen- und Breiten-Eigenschaften angepasst werden müssen, befindet sich im äußeren Dokument. Der gegenseitige DOM-Zugriff ist verboten. Was nun?
Die Lösung ist ein HTTP-Call-Back-Request: Das im IFrame dargestellte Dokument ermittelt seine eigene Geometrie und löst dann ein HTTP-Request aus, bei dem es seine Geometriedaten als GET-Parameter mitgibt. Der Request richtet sich an die Site mit dem äußeren Dokument und transportiert so die Geometriedaten über Protokoll- und Domain-Grenzen hinweg.
Das ist die Grundidee. Jetzt sind zwei Fragen sind zu lösen:
Wie erzeugen wir in dem IFrame-Dokument den Http-Call-Back-Reguest zum Transport der Geometriedaten?
Wie nehmen wir den Request entgegen, so dass wir die Höhe des IFrame-Elementes manipulieren können?
Am Ende ganz einfach
Mit Javascript und dem DOM als Technologie ist das am Ende ganz einfach:
Http-Call-Back-Reguest mittels weiteren IFrame
Zunächst stellt das im Iframe dargestellte Dokument seine Geometrie fest. Für die Höhe z.B. so:
var body = document.getElementsByTagName("body")[0]
var body_heigth = body.heigth
Dieser Code darf erst ausgeführt werden, wenn das Dokument fertig ist. Also
z.B. beim onload-Event des Bodies.
Den Http-Request erzeugen wir dadurch, dass wir ein (unsichtbares) IFrame-Element erzeugen.
Nochmal zur Erinnerung: Gedanklich befinden wir uns im IFrame-Dokument, welches mittels HTTPS geladen wird und möglicherweise auf einer fremden Site liegt. Seine Größe wollen wir an unser äußeres Dokument übermitteln.
Hierfür wollen wir einen Request mit den Geometriedaten zu unserer Site senden. Hierfür müssen wir eine Request-URL festlegen, an die wir die Geometriedaten als Parameter anhängen. Dann können wir mittels DHTML das Call-Back-IFrame-Element in dem IFrame-Dokument erzeugen. Wichtig ist: Die Call-Back-Url soll auf der selben Site liegen, wie das äußere Dokument, welches das IFrame-Element enthält, dessen Geometrie wir anpassen wollen:
var callback_url = "http://myhost/mycallback.html?heigth=" + body_height
body.innerHTML += "<iframe src='" + callback_url + "' width=1 height=1 style='display: none'>
Dieser Code kommt in das IFrame-Dokument.
Das war der erste Streich. Der Zweite folgt sogleich.
Request-Entgegennahme und Höhenmanipulation
Als Request-URL haben wir
http://myhost/mycallback.html?heigth=höhe festgelegt. Absichtlich
habe ich hierfür ein HTML-Dokument mycallback.html gewählt, denn
mehr benötigen wir nicht.
Das Dokument besitzt keinen darzustellenden Inhalt, sondern nur Javascript. Das Javascript hat zwei Aufgaben:
Die übermittelten Geometriedaten aus der URL auslesen.
Das IFrame-Element des äußeren Dokuments manipulieren.
Zu Erinnerung: Wir haben ein äußeres Dokument mit einem IFrame-Element, dessen Geometrie wir an seinen Inhalt anpassen wollen. Der Inhalt wird via HTTPS geladen und stammt möglicherweise von einer fremden Site. In diese Dokument haben wir unser obiges Javascript eingesetzt, so dass wir in dem IFrame einen weiteren Call-Back-IFrame erhalten, dessen URL auf unsere Site zeigt und mit dem Request die Geometriedaten zu uns transportiert.
Das Auslesen der Höhe aus den URL-Parametern ist einfach (wir verzichten hier auf Fehlerbehandlung):
var height = /\?heigth=(\d+)/.exec(document.serach)[0]
Die an dem IFrame einzustellende Höhe haben wir jetzt. Nun müssten wir
das äußere IFrame-Element im DOM finden. Ich nehme hier mal an, dass das
IFrame-Element die ID myiframe trägt. Dann geht das so:
parent.parent.document.getElementById('myiframe').height = heigth
Mit parent erreichen wir den via HTTPS eingebundenen IFrame. Dessen
parent ist das Window unseres äußeren Dokuments.
Diese beiden Zeilen sind alles, was wir in unserer Call-Back-Html-Seite benötigen.
Aussicht
Mancher wird jetzt erwarten, dass diese Lösung Sicherheitswarnungen des Browsers produziert, weil das HTTPS-Dokument ungesicherte Elemente (unseren call-Back-IFrame) enthält. Dem ist nicht so.
Eine richtig runde Lösung würde jetzt natürlich die callback_url und die ID des äußeren IFrames
parametrisieren, so dass das ferne Sytem mit dem IFrame-Inhalt diese Dinge nicht wissen muss.
Das zu tu überlasse ich dem geneigen Leser.
dipe.de
