how to increase iframe height when tab selected containts long content

I have included iframe to other web page as below

<script type="text/javascript">window.addEventListener("message", function(e){var $iframe=document.getElementById("my-iframe"); var eventName=e.data[0]; var data=e.data[1];switch(eventName){case "setHeight": $iframe.height=parseInt(data); break; case "scrollToTop": $iframe.scrollIntoView(); break;}}, false);
</script>
<div style="width:100%; text-align:left;" >
<iframe src="http://mywebpage.com/list?mode=iframe" frameborder="0" height="1000" width="100%" vspace="0" hspace="0" marginheight="5" marginwidth="5" scrolling="no" allowtransparency="true" id="my-iframe"></iframe>
</div>

I have three tabs in iframe page, first tab contains data which don't have long content but third tab having long content. When i open third tab, iframe height doesn't get increased. Iframe height remains same when loaded for first time and remaining page's content gets hidden. How can i fix this ? I have used TBHTML tabs for tab rendering as below.

echo TbHtml::tabbableTabs($tabs);