Search code examples
javascripthtmliframewindow

Iframe onload resizing working in Chrome, but not IE or Firefox

I am using javascript to create an iframe inside a div to give the illusion of a window opening over the website. So far I have a script that works well in chrome, but fails to work properly in IE or Firefox. The script is below:

HTML:

<a href="#" onclick="openWindow('login.php')">Log in</a>

Javascript:

function openWindow(href) {

    var win = document.createElement("DIV");
    win.id = "window";

    var iframe = document.createElement("IFRAME");
    iframe.src = href;
    iframe.seamless = "seamless";
    iframe.scrolling = "no";
    win.appendChild(iframe);
    iframe.onload = function() { resizeWindow(this) };

    document.body.appendChild(win);

}

function resizeWindow(element) {

    var newHeight = element.contentWindow.document.body.scrollHeight;
    element.style.height = newHeight + "px";
    element.parentNode.style.height = newHeight + "px";
    element.parentNode.style.display = "block";

}

The problem arises when I declare the variable newHeight. I have found that while Chrome is successful in finding the element.contentWindow.document.body.scrollHeight, Firefox and IE are not (they return 0). This results in a squashed (height: 0) window div in the problem browsers.

My question is a) how can I write this in such a way that it works in the problem browsers, or b) is there an easier way overall to handle external pages, such as my login form, in a window over the user's current page?

Thank you.

Solution

  • I found the issue. I had the style.display of my window div set to "none" and was changing it to "block" once the iframe and all were loaded. Unfortunately - in IE and Firefox, but not in Chrome - the iframe's height variables could not be retrieved in the "none" state.

    I have since changed my loading method and all is well.