dynamically resize iframe height based on dynamic content

jquery ajax iframe dynamic height

12,528

In your child page, after the dynamically generated code has finished loading, insert this code:

// Rsize containing iframe to proper height
parent.parent.resizeIframe($('html').height());

Then, in the parent page, include this function:

function resizeIframe(newHgt)
{
    $('#iframeid').height((parseInt(newHgt)+75)+'px');
}

This will get you where you need to be, but the issue I'm trying to resolve is how to determine the size of the iframe contents after the dynamically generated code has finished loading ... "all from the parent page".

Anyway, hope this helps you.

...

12,528

Author by

braindead

Updated on June 05, 2022

Comments

braindead almost 2 years
First, I'll give you the structure of my page:
```
<html>
<body>
    <div>
    <iframe>
        <div id="div1">
        </div>
    </iframe>
    </div>
</body>
</html>
```
If only I knew ahead the size of div1, there's no problem here. However, I am dynamically adding contents into div1 using jquery ajax and so I could not pre-set the <iframe>'s height.

I've tried the solutions I found in other threads by adding some script in the onload of the <iframe> but it's useless since the contents are dynamically changing without reloading the page.

Any help?
braindead almost 12 years

I've actually used that script already and it did not solved my problem. I'm now redesigning my app to get rid of the iframe. It had wasted me so much time fixing a lot of things. Thanks to all your replies.
Danilo almost 11 years

You should open a question for your issue.
hitautodestruct almost 10 years

Should mention that this does not work when same-origin policy is in affect.