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??

Answer 1

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);

}