Resize iFrame dynamically based on content

iFrame will resize dynamically for content on the same domain.

 

 

<style>.woocommerce-product-gallery{ opacity: 1 !important; }</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript'>
   
    $(function(){
   
        var iFrames = $('iframe');
     
            function iResize() {
           
                    for (var i = 0, j = iFrames.length; i < j; i++) {
                      iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
                }
               
                if ($.browser.safari || $.browser.opera) {
               
                   iFrames.load(function(){
                       setTimeout(iResize, 0);
               });
           
                   for (var i = 0, j = iFrames.length; i < j; i++) {
                                var iSource = iFrames[i].src;
                                iFrames[i].src = '';
                                iFrames[i].src = iSource;
               }
              
                } else {
                   iFrames.load(function() {
                       this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
                   });
                }
       
        });

</script>

 

 

 

<style>.woocommerce-product-gallery{ opacity: 1 !important; }</style>

<iframe src="content.html" class="iframe" scrolling="no" frameborder="0"></iframe>