Search code examples
jqueryajaxiframeheightcomputed-style

Dynamically adjust iframe height based on content


There are a lot of answers on how to change iframe height dynamically. I tried the plugin https://github.com/house9/jquery-iframe-auto-height

The plugin works on iframe load, however, the height does not dynamically change based on changes within the iframe content if the content does not reload (ajax for example).

My question is: How to dynamically change the height of the iframe as the content changes height?


Solution

  • Edit... Ok, my friend told me right way. I removed plugin from main window and added to iframe page this jquery code:

    _

    setInterval(function(){
        //console.log($("body").height());
        parent.$("iframe").height($("body").height());
    }, 100);
    

    but there is problem, that after expanding, height does not change to its first state. It grows bigger, but does not goes smaller if i close accordeon at example... This problem is only in Chrome browser...

    Looks like it's Chrome bug, because if you try to resize Chrome window iframe goes back to normal height. On IE9 and FF12 works fine.