Question

Possible Duplicate:
Resizing an iframe based on content

I’m trying to load one of my pages into an iframe. I’m never sure how big the page will be, the data on the page is loaded dynamically. I’d like the iframe to always fit the page, no matter how big or small it is. Here’s what I have:

function loadModal() {
    myframe = $('<iframe id="mymodal" src="MyPage.aspx" width="700"></iframe>');

    myframe.appendTo($('html'));

    var height = document.getElementById('modalPreview').contentWindow
                     .document.body.scrollHeight;

    $("#mymodal").attr("height", height);
}

I’ve been trying to get the height of the page after it’s loaded. The problem is that height comes back as 0. But if I do this:

    setTimeout(function () {
        $("#mymodal").attr("height", height);
    }, 2000);

the correct height is loaded. I assume it’s because the data needs a few seconds to load. But this looks funky if the page loads really fast, or it will still give me a height of 0 if it takes more than 2 seconds to load the page.

So is there a way to:

1. Wait and set the height of the iframe once the data loads, or
2. Set the height of the parent iframe from MyPage.aspx?

Answer 1

If you’re going to use option #2 you can access the parent window using the DOM and set the iframe height from the child.

$(document).ready(function() {
    var iframeWin = parent.document.getElementById("yourIframeID");
    iframeWin.height = document.body.scrollHeight;
});