Dynamic IFrame resize not working in IE?

Question

I have some code to dynamically resize iframes:

function autoResizeFrames() {
    frames = document.getElementsByTagName("iFrame");
    window.setInterval("autoresize_frames()", 400);
}

function autoresize_frames() {

    for (var i = 0; i < frames.length; ++i) {
        if (frames[i].contentWindow.document.body) {
            var frames_size = frames[i].contentWindow.document.body.offsetHeight;
            if (document.all && !window.opera) {
                frames_size = frames[i].contentWindow.document.body.scrollHeight;
            }
            frames[i].style.height = frames_size + 'px';
        }
    }
}

This function works great in Firefox and Chrome, but in IE 10 and 9 it has mo effect.

Here is where I have an IFrame

<div id="projectModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="projectModalLabel"
            aria-hidden="true">
            <div class="modal-header">
                   <button type="button" runat="server" onserverclick="btnClose_Click"  class="close" aria-hidden="true">
                    ×</button>
                <h3 id="projectModalLabel">Edit Project</h3>
            </div>
            <div class="modal-body">
                <iframe src="" style="width: 100%; height: 200px; border: none;" frameborder="0" id="projectFrame" name="projectFrame" scrolling="no" allowtransparency="true"></iframe>
            </div>
            <div class="modal-footer">
                      <button type="button" runat="server" onserverclick="btnClose_Click"  class="btn" aria-hidden="true">
                    Close</button>
            </div>
        </div>

Why does it work everywhere except IE? I thought javascript worked everywhere?

Thanks

It says:

SCRIPT5007: Unable to get property 'document' of undefined or null reference 
kezcommon.js, line 62 character 5

if (frames.contentWindow.document.body) {

Answer 1

window.frames is a native DOM collection, and you're assigning a nodelist with the same name. Somehow IE messes up with these two frames , which are not similar.

autoresize_frames() seems to use window.frames collection instead of the frames nodelist (defined in autoResizeFrames() ). However, when accessing iframe via this collection, there's no contentWindow or contentDocument available in IE, since window.frames contains actual window objects within the iframe s.

You need to access straight to frames[i].document or frames[i] which is the window in the iframe .

A quickfix would be to use some other name instead of frames for the nodelist.

Answer 2

Try

window.setInterval(autoresize_frames, 400);

just to see if the alternate means of setting the callback does the trick. You might also need to put the autoresize_frames() function above the autoResizeFrames() function to make sure it exists in memory before it's called by setInterval().