Iframe-Tags bieten die Möglichkeit, eine Webseite innerhalb 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.
Iframes bzw. Frames gibt es seit 1996. Dennoch waren Iframes noch nie besonders populär. Vielleicht hängt dies damit zusammen, dass das Iframes einige besondere Eigenschaften, die von anderen HTML-Elementen abweichen. Die Herausforderung besteht darin, ein Verhalten zu erzeugen, das anderen HTML-Elementen ähnlich ist, wie z.B. einem DIV-Tag.
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. Fällt Ihnen auf, dass es ein IFrame ist? Nein. Dann ist es gut. 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.
JavaScript ist zwingend erforderlich, um die Höhe des Iframes exakt an den Inhalt anzupassen.
Wenn der Inhalt des Iframes auf einem anderen Server liegt, verhindern die Cross-Origin-Bestimmungen von Browsern den Zugriff auf die Elemente des Iframes.
Falls Sie im Besitz des fremden Service sind, kann eine Lösung darin bestehen, die Scroll-Höhe über ein MessageEvent zu senden. Sie müssen also ein großes Geschütz auffahren, um diese simple Information zu übermitteln. Vielleicht mache ich in der Zukunft auch dazu ein Tutorial.