dynamically resize iframe height based on dynamic content

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?

Answers


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.

...


I am not sure why you want to use an iframe here. But maybe you cantry using

http://sonspring.com/journal/jquery-iframe-sizing


Need Your Help

Grails, Spring Security and Mongo

mongodb grails spring-security

I try to configure Grails 3.1.4 rest-api aplication. I'd like to use Mongo and Spring Security for authentication, but when I erase from application.yml h2 datasource and hibernate and try to run

iPad orientation change - How to animate load of new nib/xib

ipad animation ios4 xib nib

In a UIViewController am detecting the view's change in orientation using didRotateFromInterfaceOrientation:(UIInterfaceOrientation)fromInterfaceOrientation. I then load a nib that corresponds to ...