Question

Okay, here goes. Stack Overflow virgin here but hopefully you guys will be able to help me.

I have been playing around with resizing the height of an iframe based on it’s content. The content varies as a user will progress through a series of forms, this means that each submit will result in a new form of which there are 3 forms.

The code below is called when the iframe loads,

function checkHeight() {
    var frame=document.getElementById('frame');
    var doc=frame.contentWindow.document;
    var data=doc.getElementById('data');
    alert(data);
    var data_height=data.offsetHeight;
    if(data_height) {
        frame.style.height=data_height + 'px';
        alert('height has been set');
    }
}

This is working fine on both mac and pc versions of Mozilla, IE and Safari but I am having a massive issue with chrome. It is not returning a document within the frame. Is this a permissions error or what?!

I have also tried contentDocument but to no avail.

All the documents reside on my server and are all within the same folder.

Thanks in advance.

Answer 1

Edit:

I’ve re-read your question – would it be simpler to just calculate the height inside the iframe’s document and call the parent resizing function since they are in the same security sandbox (i.e. on the same domain)?

Original:

Since a somewhat similar thing happens when the iframes are embedded from a different domain (cannot access iframe..document) I’d speculate this approach would work:

1. First: calculate the document height in the document itself (i.e. inside the iframe).
2. Pass the values to the parent using window.postMessage/hash polling for older browsers. There is a neat library that takes care of compatibility for you.
3. Receive the value in the parent and resize the iframe accordingly.

Again, this may be overkill, but given that the solution has been tested to do exactly what you’re after between different security sandboxes, this should also be the case for a simpler scenario if iframes are on the same domain.

That being said, if they are on the same domain (as opposed to widgets/non-mashable third party content) is there really need for an iframe? Sounds like it’s just a matter of setting up jQuery to make ajax requests and populate container(s) with new data.