jquery get height of iframe content when loaded

Question

I have a Help page, help.php that I am loading inside an iframe in main.php How can I get the height of this page once it has loaded in the iframe?

I am asking this because I can't style the height of to iframe to 100% or auto. That's why I think I need to use javascript.. I am using jQuery

CSS:

        body { margin: 0; padding: 0; }
        .container { 
            width: 900px;
            height: 100%;
            margin: 0 auto;
            background: silver; 
        }
            .help-div { 
                display: none;
                width: 850px; 
                height: 100%;
                position: absolute;
                top: 100px;
                background: orange;     
            }   
        #help-frame {
            width: 100%; 
            height: auto;
            margin:0; padding:0;
        }

JS:

        $(document).ready(function() {      
            $("a.open-help").click(function() {
                $(".help-div").show();
                return false;
            })
        })

HTML:

    <div class='container'>

        <!-- -->
        <div class='help-div'>
            <p>This is a div with an iframe loading the help page</p>
            <iframe id="help-frame" src="../help.php" width="100%" height="100%" frameborder="1"></iframe>
        </div>  

        <a class="open-help" href="#">open Help in iFrame</a>

        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>
        <p>hello world</p>

    </div>

Answer 1

I'm not sure what, if any, events in the iFrame are returned to the parent page (I'm fairly sure that none will make it back, but I'm not entirely certain). All I can think of to suggest in this matter is that in the function call to load the help.php page you also implement a call to:

$('#iframeID').height();

Which will, obviously, return the height of the element (in the parent page). You can then use that as a console.log(/*...*/), or an alert(/*...*/) or in whatever way you'd like. The problem remains, though, that I don't think that there's a way of responding to a change, or load, event in the iFrame itself.

Answer 2

The less complicated answer is to use .contents() to get at the iframe. Interestingly, though, it returns a different value from what I get using the code in my original answer, due to the padding on the body, I believe.

$('iframe').contents().height() + 'is the height'

---

This is how I've done it for cross-domain communication, so I'm afraid it's maybe unnecessarily complicated. First, I would put jQuery inside the iFrame's document; this will consume more memory, but it shouldn't increase load time as the script only needs to be loaded once.

Use the iFrame's jQuery to measure the height of your iframe's body as early as possible (onDOMReady) and then set the URL hash to that height. And in the parent document, add an onload event to the iFrame tag that will look at the location of the iframe and extract the value you need. Because onDOMReady will always occur before the document's load event, you can be fairly certain the value will get communicated correctly without a race condition complicating things.

In other words:

...in Help.php:

var getDocumentHeight = function() {
    if (location.hash === '') { // EDIT: this should prevent the retriggering of onDOMReady
        location.hash = $('body').height(); 
        // at this point the document address will be something like help.php#1552
    }
};
$(getDocumentHeight);

...and in the parent document:

var getIFrameHeight = function() {
    var iFrame = $('iframe')[0]; // this will return the DOM element
    var strHash = iFrame.contentDocument.location.hash;
    alert(strHash); // will return something like '#1552'
};
$('iframe').bind('load', getIFrameHeight );

Answer 3

ok I finally found a good solution:

$('iframe').load(function() {
    this.style.height =
    this.contentWindow.document.body.offsetHeight + 'px';
});

Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.

$('iframe').load(function() {
    setTimeout(iResize, 50);
    // Safari and Opera need a kick-start.
    var iSource = document.getElementById('your-iframe-id').src;
    document.getElementById('your-iframe-id').src = '';
    document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
    document.getElementById('your-iframe-id').style.height = 
    document.getElementById('your-iframe-id').contentWindow.document.body.offsetHeight + 'px';
}