Question

109

Change iframe height based on dynamic content inside

rated 0 times [ 114] [ 5] / answers: 1 / hits: 19359 / 12 Years ago, wed, october 10, 2012, 12:00:00

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:

Wait and set the height of the iframe once the data loads, or

Set the height of the parent iframe from MyPage.aspx?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kamryn

Add To Favorites

Follow

Total Points: 645

Total Questions: 100

Total Answers: 118

Location: Tanzania

Member since Wed, Feb 24, 2021

3 Years ago

answered 12 Years ago kevonmoisesf · Accepted Answer

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;

});