Iframe setting dynamic height works only on chrome

Question

I'm using an iframe on my webpage. I need the set the height of the iframe dynamically, according to the content. I'm using the following code to achieve this.

$('iframe').on('load',function(){
    $('iframe').attr('id','sop_iframe');
    $('#sop_iframe').height($('#sop_iframe').contents().height())   
});

This works perfectly in chrome.. but not on firefox and IE. Is there any cross browser jquery solution??

It has been largely discussed here: http://stackoverflow.com/questions/9975810/make-iframe-automatically-adjust-height-according-to-the-contents-without-using — Christian Benseler, Sep 03 '14 at 11:01

score 0 · Answer 1 · answered Sep 03 '14 at 11:17

function setFrameHeight() { 

var h;
var defaulth = 150;
var scrollh = window.top.document.documentElement.scrollTop;

//reset the iframe to default height
window.top.document.getElementById("iframe_form").height = defaulth;

//get actual heights
var y1 = document.documentElement.scrollHeight;
if (y1 < document.body.scrollHeight) y1 = document.body.scrollHeight;
var y2 = document.documentElement.offsetHeight;
if (y2 < document.body.offsetHeight) y2 = document.body.offsetHeight;
h = (y1 > y2) ? y1 : y2;

//determine smaller heights
h = (h > defaulth) ? h : defaulth;

//set "iframe_form" to proper height
window.top.document.getElementById("iframe_form").height = h;


//scroll to top
window.top.scrollTo(0,scrollh);

}

Iframe setting dynamic height works only on chrome

1 Answers1