Freitag, 30. Juni 2023
Die Höhe eines iFrames responsiv dem Inhalt anpassen
Heute mal ein absolutes Nischenthema, das vermutlich nur ganz wenige interessiert. Ich veröffentliche es dennoch, auch weil meine Website mir selbst als Nachschlagewerk dient.
Frames gehören ja zum Glück in die Mottenkiste des Webdesigns. (Hier mein Werk aus dem Jahr 2000 FrontPage Express von Microsoft sorgte damals für das Framegerüst.) Aber für iFrames (Inline Frames) gibt es nach wie vor – mehr oder weniger sinnvolle – Anwendungsfälle.
Was ChatGPT dazu sagt:
Auch im Jahr 2023 gibt es weiterhin sinnvolle Anwendungen für die Verwendung von iFrames. iFrames (Inline Frames) sind HTML-Elemente, die es ermöglichen, Inhalte von einer anderen Webseite in eine Zielseite einzubetten. Obwohl sich die Webtechnologien weiterentwickelt haben und neue Ansätze wie AJAX, Single-Page-Anwendungen und Webkomponenten an Bedeutung gewonnen haben, gibt es immer noch Szenarien, in denen iFrames nützlich sind. Hier sind einige Beispiele:
Einbindung externer Inhalte: iFrames können verwendet werden, um Inhalte von anderen Websites oder Webanwendungen nahtlos in eine Zielseite einzubetten. Dies kann nützlich sein, um Widgets, eingebettete Videos, Karten oder soziale Medieninhalte bereitzustellen.
Werbung und Partnerintegration: iFrames können verwendet werden, um Werbung oder Partnerinhalte auf einer Webseite einzubetten. Dies ermöglicht es, den Inhalt dynamisch von einer externen Quelle zu laden und anzuzeigen, ohne dass Änderungen am Hauptlayout der Webseite vorgenommen werden müssen.
Sicherheit und Isolation: iFrames bieten eine gewisse Sicherheit und Isolation, da der eingebettete Inhalt in einem separaten Kontext ausgeführt wird. Dies kann hilfreich sein, um Drittanbieterinhalte einzubetten, ohne dass sie die Hauptseite beeinträchtigen können. Dies ist insbesondere dann wichtig, wenn die eingebetteten Inhalte von nicht vertrauenswürdigen Quellen stammen.
Integration von Legacy-Systemen: In Unternehmen gibt es oft Legacy-Systeme, die nicht leicht in moderne Webanwendungen integriert werden können. Mit iFrames können Inhalte aus diesen Legacy-Systemen in eine neue Anwendung eingebettet werden, ohne dass umfangreiche Änderungen am bestehenden Code vorgenommen werden müssen.
Cross-Domain-Kommunikation: iFrames können verwendet werden, um Kommunikation zwischen verschiedenen Domains oder Subdomains zu ermöglichen. Dies kann in Szenarien nützlich sein, in denen eine Webseite mit anderen Teilen eines Systems oder einer Anwendung interagieren muss, die auf unterschiedlichen Domains gehostet werden.
Es ist jedoch wichtig zu beachten, dass die Verwendung von iFrames auch potenzielle Nachteile und Sicherheitsrisiken mit sich bringen kann. Beispielsweise können Cross-Site-Scripting (XSS)-Angriffe über iFrames durchgeführt werden, wenn die eingebetteten Inhalte nicht ausreichend validiert werden. Daher sollte bei der Verwendung von iFrames immer auf bewährte Sicherheitspraktiken geachtet werden.
Beim Einsatz von iFrames kann ein Designproblem auftreten, insbesondere im Zusammenhang mit Responsivem Web Design (RWD): Die Höhe des iFrames muss explizit festgelegt werden, entweder hart codiert im HTML, oder mittels CSS. Und wahrscheinlich passt die Angabe nie. Entweder es entsteht ein unschöner Leerraum, oder innerhalb des iFrames muss gescrollt werden.
Bei professorweb.de hab' ich ein JavaScript gefunden, das hier Abhilfe schaffen kann:
<script>
var framefenster = document.getElementsByTagName("iframe");
var auto_resize_timer = window.setInterval("autoresize_frames()", 400);
function autoresize_frames() {
for (var i = 0; i < framefenster.length; ++i) {
if(framefenster[i].contentWindow.document.body){
var framefenster_size = framefenster[i].contentWindow.document.body.offsetHeight +80;
framefenster[i].style.height = framefenster_size + 'px';
}
}
}
</script>
ACHTUNG! Das Script funktioniert nur dann, wenn sich die Datei des iFrame und die Datei die im iFrame aufgerufen wird, auf der gleichen Domain befindet! Aus Sicherheitsgründen ist eine domainübergreifende Lösung in den Browsern abgeschaltet.
Als Beispiel dient meine eigene Website.
Einfach im iFrame in der Navigation verschiedene Seiten wählen, oder die Fensterbreite des Browsers ändern, um zu sehen, wie sich die Höhe des iFrames jeweils dem Inhalt anpasst. Ohne Scrollbalken im iFrame, und ohne unnötigen Leerraum unter dem Inhalt.
Mit folgendem Button den Inhalt des iFrames ändern:
Der iFrame
Achtung! Lassen Sie sich nicht irritieren durch die scheinbare "Verdopplung" des Inhalt. Vor allem nicht auf einem kleinen Smartphone-Monitor. Um den Inhalt des iFrames deutlich kenntlich zu machen, wird er mit einem gepunkteten Rahmen umgeben.
Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.
Kommentare
Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.