page has different height when inside an iframe

Question

I've googled a bit and there were a few leads, but I couldn't get any of those leads to work:

I have a page that has an iframe with the src pointing to an external page (cross domain). When the child/iframed page loads, it posts a message of its height. I put a console.log of the height in the javascript. If I open that page in a separate window (type the iframe's src URL in a separate tab, in other words), the console logs the expected height.

However, when I open the parent page with the iframe, the console logs either 0 or a very incorrect value of 150. I've looked through the css and html, and I don't have any specifications of 150.. Anyone have a clue what's going on here?

Abstracted code:

Parent HTML:

...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...

Parent Javascript:

...
$(document).ready(function(){
    window.addEventListener('message', function(m){
        var messageData = m.data;
        if(messageData.type=='document-loaded' && 
            messageData.hasOwnProperty('height'){
            resize_iframe(messageData.height); //function defined else where 
                                               //and works
        };
});
...

IFrame Javascript:

...
$(document).ready(function(){
    var body = document.body;
    var html = document.documentElement;
    var maxHeight = Math.max(body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight);
    //Logs height correctly when opened in a separate window but not when 
    //iframed
    console.log("POSTING HEIGHT", maxHeight); 
    window.parent.postMessage({'type':'document-loaded', 'height': maxHeight}, 
        PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...

I realize I have a mixture of jquery and vanilla javascript here; I've done both $(document).height() and the Math.max() shown above to get the height, but both ways still have the same issue.

Much thanks!

Answer 1

I had a function that looped through not-yet-accessible elements and called $(element).hide() on them -- which sets the style display: none.

Turns out calculating the height of an element is respective of its visibility on the actual page, regardless of it being in an iframe. So the browser couldn't see it, so the height was being miscalculated (still weird it was returning a random 150px value). That explains why it was calculating correctly on a separate page.

Instead of doing hide(), I just set the visibility to hidden and that fixed my issue of getting the incorrect heights.