Adjust contentWindow height with jQuery Event

Question

This is what I have so far, using this post:

Make iframe automatically adjust height according to the contents without using scrollbar?

The problem is the function resizeIframe() doesn't seem to change anything after it is called again. The frame size doesn't change.

Here is my full code:

function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

$(document).ready(function() {

// change iframe based on drop down menu //

    $('#dropdown').click(function(){
        $('iframe').slideUp("slow");
        $('iframe').attr('src', 'preview.php?frame=off&sid='+$(this).val());
        resizeIframe(document.getElementById('previewframe'));
        $('iframe').slideDown('slow');
    });
}

This is my HTML

<iframe id="previewframe" src="preview.php?frame=off&sid=1" style="width: 100%; overflow-x: hidden; overflow-y: scroll" onload='javascript:resizeIframe(this);'>
</iframe>

Please read this edit before answering

Edit: So I got a few steps closer to success, but I am not there yet.

So in the iframe source html I embedded this at the bottom of the body:

<script type="text/javascript">
    parent.AdjustIframeHeight(parseInt(document.getElementById("body").scrollHeight));
</script>

and then I have the following in my main file:

<iframe name="previewframe" id="previewframe" src="preview.php?frame=off&sid=1" style="width: 100%; overflow-x: hidden; overflow-y: scroll;">
</iframe>
<script type="text/javascript">
    function AdjustIframeHeight(i) {
        alert("CHANGING: " + parseInt(i));
        document.getElementById('previewframe').style.height = parseInt(i) + "px";
        alert("Current value: " + document.getElementById('previewframe').style.height);
    }
</script>

So everything works fine, the correct value is sent to the alert, and the second alert sends back the value that was originally passed, BUT the actual frame height doesn't change.

The really strange part is that if I open the console up, and manually enter:

document.getElementById('previewframe').style.height = "800px";

it will work perfectly. So this makes me believe that the browser just needs to update the set height somehow.

score 2 · Answer 1 · answered Jan 26 '15 at 05:35

I ran into this issue. Here's how I was able to make it work.

myiframe.css('visibility', 'hidden' );
myiframe.css('height', '1px' );
myiframe.css('height', myiframe.contents().height() ); // get the size of the iframe content height.
myiframe.css('visibility', 'visible' );

I got the idea of hiding it and making it visible was from this link, but that didn't work alone. I switched from document.getElementById(id).style.height to myiframe.css() and it worked.

score 1 · Accepted Answer · answered Jan 29 '15 at 21:49

I was able to use the this framework to get the desire solution that I wanted.

https://github.com/davidjbradshaw/iframe-resizer

My main file has this code:

<iframe id="previewframe" src="preview.php?frame=on&sid=1" style="width: 100%; overflow-x: hidden; overflow-y: scroll;"></iframe>

<script type="text/javascript">
    $('iframe').iFrameResize({
        log                     : false,   // Enable console logging
        enablePublicMethods     : true,    // Enable methods within iframe hosted page
        resizedCallback: function (obj) {
            $('iframe').slideUp("slow");
            $('iframe').slideDown("slow");
        }
    });
</script>

and my frame has this code.

     <script type="text/javascript" src="js/iframeResizer.contentWindow.min.js"></script>
     <script>
        var please = function(){
          if ('parentIFrame' in window){
            parentIFrame.setHeightCalculationMethod('max'); 
          }
        };
    </script>
</body>

Which worked!

Adjust contentWindow height with jQuery Event

Please read this edit before answering

2 Answers2