jQuery height(), innerHeight(), outerHeight() all return 0

[WolfShade]

Hello, everyone,

I’m trying to dynamically resize an iframe after the page loads, based upon the height of the content within the iframe.

In the code within the iframe, I’ve tried the following under $(document).ready(), $(document).load(), and $(window).load().

function iframe_resize(){
    alert('height ' + $(document).height());
    alert('height ' + $(document).innerHeight());
    alert('height ' + $(document).outerHeight());
    }
iframe_resize();

They all return ‘0’. I’ve even tried setting a timeout to trigger a second after the page loads. Still 0.

What am I missing?

V/r,

[RyanReese]

http://www.codefundamentals.com/test/iframe

Please review that.

I pull in an iframe from another page on that folder. I alert the iframe height.

You were basically unaware of iframes needing contentWindow.

[WolfShade]

Thank you for the link, but this is cross-domain. I’ll put what I’ve got, so far. But regardless of whether I use jQuery to get the height, or vanilla JS, it’s still reporting a height of 0.

PAGE THAT CONTAINS IFRAME (www.domain.com/documenta.cfm):

<iframe src="https://www.domain.com/documentb.cfm" name="documentb" id="documentb" style="width:100%;">
    Your browser does not support iframes - please upgrade your browser
</iframe>
<script>
    $(document).ready(function(){
        var iframe_resize = function(event){
                var iframe = document.getElementById('documentb');
                if(iframe){iframe.style.height = event.data + 'px'; }
                };
        if(window.addEventListener){ window.addEventListener("message", iframe_ressize(), false); }
        else{ window.attachEvent("onmessage", iframe_resize()); }
        });
</script>

PAGE INSIDE IFRAME (https://www.domain.com/documentb.cfm)

<form>...</form>
blah blah blah stuff something something yadda
<script>
$(document).ready(function(){
    alert($(document).height()); // 0
    alert($(document).innerHeight()); // 0
    alert($(document).outerHeight()); // 0
function resize(){
    if(parent.postMessage){ //Yes.. all my browsers work with postMessage
          parent.postMessage($(document).innerHeight(), 'http://www.domain.com'); // This is returning 0.  
          }
}
resize();
});
</script>

[RyanReese]

Resize iframe by its content – cross-domain

Might try this out?

[WolfShade]

Much appreciated, but it’s a ton of code and it polls every 1/2 second (understandably to make sure it changes when height of content changes.)

I’m beginning to think that the only option will be to load the whole page HTTPS and use AJaX that way. The boss isn’t crazy about the idea (nor am I), but I’m running out of time.

V/r,

[WolfShade]

(I was trying to use this idea, originally.)

V/r,