Hello Sitepoint Fam,
I’m looking for a good cross-domain iframe resizing script that adjusts its height based on its content without a scrollbar displaying at all. The width is working perfect but needing the actual iframe height to automatically fit in without showing any scroll bar at all. I have attached image of how it looks in site and also code below:
<!DOCTYPE html>
<html>
<head>
<title>Resize Iframe</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var $iframe = $('iframe').eq(0), ie = (function(){var ie; return (ie = /MSIE (\\d+)/.exec(navigator.userAgent)) && ie[1] < 9 ? 5 : 0;})();
$iframe.load(function(){
$iframe.animate({height: $(window.frames[0].document.body).outerHeight(true) + 5 + ie}, 600);
});
$iframe.data('load', function(){$iframe.trigger('load');});
ie && $(window).load($iframe.data('load'));
});
</script>
</head>
<body>
<iframe name="myframe" src="frame1.htm" width="100%" height="300" scrolling="no" frameborder="0"></iframe>
</body>
</html>
Thanks so much in advance