Question

I’m having trouble resizing an iframe after injecting it on load using javascript. I use a set width of around 300px which works fine but dynamically size the iframe’s height to the size of it’s content (a blog post).

I’ve tried getting contentWindow (had no child dom elements) and contentDocument (which was undefined) to no avail.

I do this on load:

var iframe = document.createElement('iframe'); 
iframe.setAttribute('id','postFrame'); 
iframe.setAttribute('frameborder','no'); 
iframe.setAttribute('scrolling','no'); 
iframe.setAttribute('onload','resizeFrame();'); 
iframe.setAttribute('width','300px'); 
iframe.setAttribute('src','http://espn.go.com/espn/print?id=7454651'); 
var container = document.getElementById('container'); 
container.appendChild(iframe);


function resizeFrame(){ /* resize iframe based on content height*/ }

Is there a way to re size iframe height based on content within the iframe?

*EDIT**

Possible workaround:

Is there any hope that i could use Access-Control-Allow-Origin to assist the problem? Lets say the page that goes in the iframe is my own or is echo’d from a php script

Answer 1

I use the following function to resize an iframe to be the height of the content. It’s for an intranet app (and only properly tested in IE8) but certainly works so it might provide the missing clue-

function sizeIframeToContent(id) {
    // resize iframe to be the height of the content
    try {
        var frame = document.getElementById(id);
        innerDoc = (frame.contentDocument) ?
                   frame.contentDocument : frame.contentWindow.document;
        var objToResize = (frame.style) ? frame.style : frame;
        objToResize.height = innerDoc.body.scrollHeight + 10 + 'px';
        //objToResize.width = innerDoc.body.scrollWidth + 10 + 'px';
    }
    catch (err) {
        console.log(err.message);
    }
}

Edit an explanation- once the document has loaded you should be able to find the document height which you can then use as the height for the iframe. I commented the width part of the above function as you’re specifically asking about the height.