Blog Logo Screenlight Blog

iFrame-Höhe einer externen eingebundenen Seite automatisch anpassen

code example

Eine kurze Erklärung und alle benötigten Code-Schnipsel, die es braucht, um die Höhe eines iFrames automatisch anzupassen. Voraussetzung: Zugriff auf beide Domains.

Möchte man die Höhe eines iFrames, welches auf eine Seite der eigenen Domain zeigt, dynamisch je nach Grösse der eingebundenen Seite anpassen, ist das grundsätzlich kein Problem, da man mittels Javascript auf das eingebettete Dokument zugreifen, und dort auf die Höhe des Bodys auslesen kann. Diese wird dann jeweils dynamisch nach Seitenaufruf dem height-Attribut des iFrames zugewiesen. Voilà.

Bei eingebundenen Seiten, die aber nicht auf der selben Domain laufen, wird der Zugriff auf den iFrame Content durch den Browser blockiert, da das vom Browser als potentieller XSS-Angriff gewertet werden muss.

Der Verständlichkeit halber hier eine kurze Erläuterung der nachfolgend gebrauchten Definitionen:

Unsere Seite – auf welcher das externe iFrame eingebunden ist – ist nachfolgend als “Domain A” Bezeichnet.
Die eingebundene Seite ist nachfolgend als “Domain B” bezeichnet.

Als erstes erstellen wir eine Seite “resize.html” die wir auf Domain A laufen lasssen. Diese Seite muss folgenden Code beinhalten

  function getUrlParam(type) {
    var url = window.location.href;
    var paramName = type;
    var regexS = "[\?&]"+name+"=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(url);

    if(results === null) return false;
    else return results[1];
  }

  var height = getUrlParam('height');
  var anchor = getUrlParam('y');

  try {
    var iFrameEl = window.parent.parent.document.getElementById('iframe-somwhere');

    if(height) {
	    iFrameEl.height = height+"px";
    }

    if(y) {
    	var scrollEv = window.parent.parent.scroll(0, parseInt(y) + iFrameEl.offsetTop);
    }

    } catch (e) {
    if(windwow.console) window.console..og(window,e);
  }

Was hier passiert ist schnell erklärt: resize.html sucht in der REQUEST URI mit welcher es aufgerufen wurde nach dem Parameter height und setzt diesen zwei ebenen weiter aussen (window.parent.parent!!) auf das eingebundene iFrame. Da resize.html auf Domain A läuft hat es auch zugriff deren zugehörigen Seiten ohne eine XSS-Policy zu brechen.

Die Seite resize.html wird nun als iFrame (width=0, height=0) auf unserer Seite von Domain B eingebunden. Domain B beinhaltet nun noch eine Javascript Funktion welche auf document.ready aufgerufen wird.

function setiFrameHeight() {
    function getDocHeight() {
        var D = document;
        return Math.max(
            Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
            Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
            Math.max(D.body.clientHeight, D.documentElement.clientHeight)) + 20;
    }

    var setiFrameHeight = document.getElementById("define-iframe-height");

    if (setiFrameHeight.src.search(/height=d+/) >= 0) {
        setiFrameHeight.onload = function () {
            setIframeHeight.onload = null;
            setIframeHeight.src = setiFrameHeight.src.replace(/height=d+/, "height=" + getDocHeight());
        };
        setiFrameHeight.src = setiFrameHeight.src.replace(/height=d+/, "height=0");
    } else {
        setiFrameHeight.onload = function () {
            setiFrameHeight.onload = null;
            setiFrameHeight.src = setIframeHeight.src.replace(/height=d+/, "height=" + getDocHeight());
        };

        setiFrameHeight.src += (setIframeHeight.src.search(/?/) >= 0 ? "&" : "?") + "height=0";
    }
}

iFrameAdjustHeight

Leave a Response

No comments so far, would you like to be the first?