Responsiver Iframe mit JavaScript

Wie mache ich einen Iframe responsiv, dass er sich automatisch in der Höhe anpasst.

Iframes lassen sich der Breite mit einer Prozentangabe versehen, aber die Höhe lässt sich nur in Pixel festlegen. Wenn man die genaue Höhe nicht weiß, kann es daher sein, dass die Höhe nicht passt und der Nutzer scrollen muss.

Abhilfe schafft etwas Java-Script. Zuerst definieren wir den Iframe:

<iframe id="iframe" width="100%" height="200" src="frame.html"
        frameborder="0" scrolling="auto" onload="setIframeHeight()"></iframe>

Dieser ruft nach dem Laden der Unterseite die Funktion “setIframeHeight” auf.

function setIframeHeight() {
    let iFrameID = document.getElementById('iframe');
    if(iFrameID) {
        try {
            let height = iFrameID.contentWindow.document.body.scrollHeight + 50;
            iFrameID.height = height + "px";
        } catch (e) { }
    }
}

Die Funktion ermittelt nach dem Laden die Höhe. Meist passt die Höhe noch nicht ganz, daher die “+ 50”. Hier kann man noch etwas nachjustieren, wenn doch ein Scrollbalken erscheint.

Einschränkung von externen Webseiten

Probleme gibt es beim Laden von externen Seiten, hier wird eine Exception erzeugt, da das Java-Script keinen Zugriff auf die externe Webseite hat, aus Sicherheitsgründen.

DOMException: Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame. at setIframeHeight (http://localhost:63342/iframe/index.html:18:49) at HTMLIFrameElement.onload (http://localhost:63342/iframe/index.html:27:69) {stack: Accessor, code: 18, name: "SecurityError", message: "Blocked a frame with origin "http://localhost:63342" from accessing a cross-origin frame."}

Tritt die Exception auf, bleibt die Höhe unverändert.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert