Ich kann mich noch an eine Zeit erinnern, als es hieß, Frames sind 90er oder Frames sind tot. Aktuell kommen bei unseren Kunden immer öfter die Anforderungen auf, doch bitte eine iFrame-Lösung zu implementieren. Macht natürlich immer genau dann Sinn, wenn „fremder“ Inhalt in eine Seite integriert oder ein Modal-Pop-up über einer Seite geöffnet werden soll.

„Fremder“ Inhalt ist hier genau der kritische Punkt. Möchte ich als eingebetteter Inhalt der äußeren Webseite sagen, wie groß ich bin, ist das leider nicht mit den üblichen JavaScript-Methoden möglich.

Wie es ohne Monieren der Browser funktioniert, soll im Blog-Beitrag geklärt werden.

Wo liegt das Problem?

Soll die Größe eines iFrames geändert werden, so muss die Größe des Inhaltes des iFrames ermittelt werden und diese der äußeren Webseite übermittelt werden. jQuery realisiert das in ein paar Zeilen Code.

var resizeIFrame = function(){
	var iFrame = jQuery('#iFrame', parent.document.body);
	var height = jQuery('body').outerHeight(true);
	iFrame.height(height);
};

Wird der Code ausgeführt und der Inhalt des iFrames liegt in derselben Domain wie die äußere Webseite, ist alles gut. Liegt der iFrame jedoch in einer anderen Domain, liefern Browser Fehler wie:

Unsafe JavaScript attempt to access frame with URL
http://localhost/iFrameResize/index.html from frame
with URL https://www.holisticon.de/iFrameResize/content.html.
Domains, protocols and ports must match.

(Safari 5.1.2)

Permission denied to access property 'document'
var iFrame = jQuery('#iFrame', parent.document.body);

(Firefox 9.0.1)

Die Lösung: Posting messages

Um domänenübergreifend iFrames mit den äußeren Seiten kommunizieren zu lassen, wird die Funktion windows.postMessage eingesetzt. Da leider noch nicht alle Browser diese Funktionalität unterstützen, hat Ben Alman ein jQuery Plugin veröffentlicht, das dies auch Browsern ermöglicht, die PostMessage nicht unterstützen.

Dazu werden jQuery und das jQuery postMessage Plugin benötigt.

Um das Skript überall einzusetzen, nutze ich die folgenden zwei Methoden, die eine Erweiterung des „cross domain iframe resize“-Bespiels von Ben Alman sind:

/**
 * Method to send the height of the content to a parent page.
 *
 * @param parent_url url where the message is sent to
 * @returns
 */
var sendContentHeight = function(parent_url) {

	// The first param is serialized using $.param (if not a string)
	// and passed to the parent window.
	// If window.postMessage exists, is is used to send
	// the parameter. Otherwise it is passed in the location hash.
	// The second param is the targetOrigin.
	function setHeight() {
		jQuery.postMessage({
			if_height : jQuery('body').outerHeight(true)
		}, parent_url, parent);
	};

	// Now the DOM has been set up (and the height should be set).
	// Invoke setHeight.
	setHeight();
};

Senden der Höhe. Dieses Script wird in der Seite, die als iFrame eingebettet wird, aufgerufen.

/**
 * Creating an iframe for loading content within.
 *
 * @param id id of element where iFrame will be appended
 *
 * @param url domain of the iFrame content
 * @param path path of iframe content without domain
 * @param initalHeight
 *            initial height of iframe will be overwritten if height
              is sent
 * @param initalWidth
 *            initial width of iframe
 * @returns
 */
var appendDynamicHeightIFrame =
    function(id, url, path, initalHeight, initalWidth) {

    // Keep track of the iframe height.
    var if_height,

    // create src of the iframe
    src = url + path + '#' + encodeURIComponent(document.location.href),

    // Append the iFrame
    iframe = jQuery(
        '<iframe src="' + src + '" frameborder="0" scrolling="no"
         width="' + initalWidth + '" height="'+ initalHeight +
        '"></iframe>').appendTo(id);

    // Setup a callback to handle the dispatched MessageEvent event.
    // In cases where window.postMessage is supported,
    // the passed event will have .data, .origin and .source properties.
    // Otherwise, this will only have the .data property.
    jQuery.receiveMessage(function(e) {
        // Get the height from the passsed data.
        var h = Number(
             e.data.replace(/.*if_height=(d+)(?:&|$)/, '$1'));

        if (!isNaN(h) && h > 0 && h !== if_height) {
            // Height has changed, update the iframe.
            iframe.height(if_height = h);
        }

        // An optional origin URL (Ignored where window.postMessage is
        // unsupported).
    }, url);

};

Dieses Script wird in die äußere Seite integriert. Die Funktion hängt ein iFrame an ein Element, dessen id via Parameter (id) übergeben wird und wartet auf eingehende Nachrichten einer Domain, die ebenfalls via Parameter (url) übergeben wird.

Zu beachten beim Einsatz von Servlet-Filtern etc.

Die receiveMessage-Funktion des Scripts nutzt den optionalen Parameter url, um sicherzustellen, dass nur Nachrichten einer definierten Domain empfangen werden. Dies ist zwar sicher, führt aber dazu, dass nur Nachrichten der Domain empfangen werden, die zuerst im iFrame aufgerufen wurde. Aus diesem Grund ist es ratsam, den optionalen Parameter url einfach wegzulassen.

jQuery.receiveMessage(function(e) {
        // Get the height from the passsed data.
        var h = Number(
             e.data.replace(/.*if_height=(d+)(?:&|$)/, '$1'));

        if (!isNaN(h) && h > 0 && h !== if_height) {
            // Height has changed, update the iframe.
            iframe.height(if_height = h);
        }
});

Eine simple Bespielanwendung kann hier heruntergeladen werden. Um den domänenübergreifenden Fall zu testen, müssen die content.html & content2.html inklusive CSS- und JS-Dateien in einer anderen Domain liegen.