Home Credits Impressum more

Iframe wie ein Div darstellen

Iframes bieten die Möglichkeit, eine Webseite in einer anderen Webseite darzustellen. Hier sehen Sie ein Beispiel. Das folgende Rechteck zeigt den Inhalt der Startseite meiner Homepage.

Der große Vorteil von Iframes besteht darin, dass man damit Webseiten modular aufbauen kann. Auch die JavaScript-Codes sind völlig getrennt.

Im Webdesign sind wir es gewohnt, Inhalt in Div-Tags zu platzieren. Div-Tags haben einige schöne Eigenschaften, z.B. können Sie sich in Bezug auf Höhe und Breite den Inhalten optimal anpassen. Das sehen sie hier:

Ein Div-Element mit Beispieltext
Hier noch eine Zeile.


Was muss passieren, dass sich ein Iframe wie ein Div verhält, also sich in der Breite den Inhalten anpasst? Die Frage ist nicht so einfach zu beantworten. Ich präsentiere hier eine Lösung, für die ich eine längere Zeit recherchieren und experimentieren musste. Diese Lösung hat sich in vielen Kontexten als hilfreich erwiesen.

Hier zunächst das Iframe. Die Erklärungen folgen unten:

Schauen wir uns den Code an:

<iframe id="myIframe" scrolling="no" style="overflow:hidden; border: none; width: 100%" src="http://www.sebastian-rikowski.de"> </iframe>

<script>
var iframe = document.getElementById("myIframe");

iframe.onload = function(){
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
}
</script>

Die Lösung habe ich von der folgenden Seite adaptiert: https://www.tutorialrepublic.com/faq/automatically-adjust-iframe-height-according-to-its-contents-using-javascript.php

Beachten Sie, dass diese Lösung nicht funktioniert, wenn der Inhalt des Iframes auf einer anderen Webseite liegt. Die Cross-Origin-Bestimmungen von Browsern verhindern es, per JavaScript auf die Elemente des Iframes zuzugreifen.

Zu diesem Thema werde ich bei Gelegenheit ein neues Tutorial erstellen. Um es vorweg zu sagen: Es ist zwingend erforderlich, hier mit einer "Message" zu arbeiten, die an die einbindende Webseite gesendet wird.