Example: Set Iframe Height Cross-Domain

This example demonstrates using JavaScript and postMessage to set the height of the iframe to match its document's height when the parent document and iframed document are on different domains. Click the links below to see.

Links to and In Iframes

Earlier we described how the iframed document obtains its own height and passes it to the containing document using postMessage, and how the containing document is set up to receive that information and use it to set the height of the iframe. This page demonstrates links loading new documents into the iframe and applying the JavaScript to these new pages.

The setIframe function displayed below shows how we apply a new URL to an iframe using the location.replace method. Although ideally we might like the back and forward buttons to be effective in moving through the iframe's history, we cannot count on the set height JavaScript being applied in that case, so we use the location.replace method since it does not affect history.

// called onclick of links that target iframe
function setIframe(id, href) {
    var ifrm = document.getElementById(id);
    ifrm.style.height = '10px'; // reset to minimal height in case going from longer to shorter doc
    //ifrm.src = href; 
    window.frames[id].location.replace(href); // since back/forward doesn't trigger height adjustment 
}

// assign onclick handlers to links
document.getElementById('demoLinks').onclick = function(e) {
    e = e || window.event;
    var tgt = e.target? e.target: e.srcElement;
    setIframe(tgt.target, tgt.href)
}

Since all our links to display new pages in the iframes are in one location (in demoLinks), we can use JavaScript to assign an onclick handler as shown above.

Links in Iframed Document

By default, links inside the iframed document will load new documents into the iframe. You can include target attributes to point to the parent document as described in Loading New Documents.

If a link is to load a new document into the iframe, you will likely want the new document to also incorporate the set height JavaScript. The JavaScript below shows how this is accomplished. The links need to be set up to call the JavaScript onclick rather than follow the URL:

<a href="more.html" onclick="return sendSetIframeMsg(this.href);">JavaScript</a>

The function called onclick is displayed here:

// Send message to parent to load new document in iframe
function sendSetIframeMsg(href) {
    if ( parent !== self) { // in iframe?
        parent.postMessage( JSON.stringify( {'href': href} ), '*' );
        // or include target origin
        //parent.postMessage( JSON.stringify( {'href': href} ), 'http://www.dyn-web.com' );
        return false;
    }
    return true; // follow link
}

First the function checks to be sure that the page is actually in an iframe, and then sends the links href to the parent document using postMessage. The parent document will adjust the height of the iframe and use location.replace as shown above to apply the new URL to the iframe. Then when the iframe loads, the set height JavaScript will be called, as long as the page includes the necessary JavaScript, which we include in a co-height.js file. The parent document requires the JavaScript included in set-height.js.