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.
Iframes bieten eine Reihe von Vor- und Nachteilen. Bei der Entwicklung von Web-Apps ist man immer wieder mit IFrames konfrontiert.
Die Herausforderung besteht darin, ein Verhalten zu erzeugen, das anderen HTML-Elementen ähnlich ist, wie z.B. einem DIV-Tag. Iframes sollen sich natlos in eine Webseite einfügen. Doch ist das leichter gesagt als getan.
Es gibt drei unterschiedliche Szenarien, in denen man IFrames einsetzen möchte. In jedem Szenario sind unterschiedliche Herangehensweisen erforderlich. Für den dritten Fall gibt es keine Lösung:
Hier möchte ich eine Lösung für den ersten Fall präsentieren. Beim zweiten Fallen müssen auch auf der einzubindenden Webseite Vorkehrungen getroffen werden. Beim dritten Fall gibt es keine mir bekannte Lösung. Man kann zwar auch Webseiten einbinden, die auf fremden Server liegen. Es ist aber meines Wissens nicht möglich, das Verhalten eines DIVs zu erzielen. Hier zunächst ein Beispiel. Fällt Ihnen auf, dass das Folgende 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 einem fremden Server liegt. In diesem Fall 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. An dieser Stelle soll dieser Fall aber im Moment nicht vertiefert werden.