iframe-Höhe am Inhalt ausrichten

Stellen wir uns vor, Ihre iframe-Komponente stelle eine Liste aus einer anderen Seite dar. Wächst diese Liste, findet sie irgendwann keinen Platz mehr im iframe. Dann erscheint an dessem rechten Rand ein Scrollbalken. Besser wäre, wenn sich das iframe automatisch an die Länge der Liste anpassen würde – dann bräuchten die Besucher nicht zu scrollen im iframe.

Leider konnten wir kein Javascript entwickeln, das die iframe-Höhe automatisch an den darin geladenen Inhalt anpasst. Dieses Problem kann jedoch mittels einer HTML-Komponente gelöst werden, wie wir im Folgenden zeigen.

Sie erstellen anstelle Ihres iframes eine HTML-Komponente (s. Beispiel). Darin definieren Sie das iframe, unmittelbar gefolgt vom Skript, das die Höhe anpasst. (Diese Lösung funktioniert jedoch nur, wenn der Inhalt aus Ihrer Webdomäne www.abc.uzh.ch selbst stammt.)

<iframe id="myiframe" style="width: 100%;" src="https://www.abc.uzh.ch/path/to/page.html"></iframe>
<script>
    var frame = document.getElementById("myiframe");
    frame.onload = function()
    {
       frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';
    }
</script>

Im nachfolgenden iframe zeigen wir einfach nochmals den Inhalt des ersten Abschnitts dieser Seite an. Wie Sie an diesem Beispiel leicht erkennen können, muss die Anpassung ans UZH-Webdesign in der Quellseite selbst geschehen.