Iframe auto Re-size when content of iframe change

Question

my Iframe (that is on other domain) use Ajax inside and data height change when you select dropdown values.

Visit for my Iframe demo [here] (http://jsfiddle.net/pq7twrh2/5/)

in my Iframe when i select all dropdown then show data and then height increase. i want when content or height increase my frame height auto increase. how this possible?

Answer 1

try adding this to your iframe source:

$(document).ready(function(){
    $('#engineType').change(function(){
        $('#iframe1', window.parent.document).height($('#VehicleDetails').height() + 227);
    });
});    

Make sure that you follow the Same-Origin Policy

Answer 2

One of the few ways would be to get the iframe content (which is your site's content) and get the height of the body and set the iframe's height. Except if you get this error: The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match The frame requesting access has a protocol of "file", the frame being accessed has a protocol of "http". Protocols must match , you are getting a cross-domain problem, and you won't be able to fix that. It is impossible for your site to access the loaded iframe's site at all.

But if you manage to do that, it would be like this:

jQuery(function($){
    var lastHeight = 0, curHeight = 0, $frame = $('iframe');
    setInterval(function(){
        console.log($frame.get());
        curHeight = $frame.contents().find('body').height();    
        if ( curHeight != lastHeight ) {
           $frame.css('height', (lastHeight = curHeight) + 'px' );
        }
    },500);
});

This will check the height of the body of your iframe's site every half a second and set the iframe's height if it has been changed: http://jsfiddle.net/pq7twrh2/7/