CODEWITHSUNDEEP
javascripthtmliframewindow
Roame
Roame

Reputation: 71

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.

Upvotes: 0

Views: 1382

Answers (2)

Roame
Roame

Reputation: 71

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.

Upvotes: 1

idzignr
idzignr

Reputation: 36

Hope, This following code will Help! 

<script language="javascript">
function openWindow(href) {
    var win = document.createElement("DIV");
    win.id = "window";
    var iframe = document.createElement("IFRAME");
    iframe.id = "frame1";
    iframe.src = href;
    iframe.seamless = "seamless";
    iframe.scrolling = "no";
    win.appendChild(iframe);
    iframe.onload = function() { return resizeWindow(this) };
    document.body.appendChild(win);
}
function resizeWindow(element) {
    var newHeight = element.contentWindow.document.body.scrollHeight;
    element.style.height = newHeight + "px";
    var frameId= document.getElementById('frame1');
    frameId.style.height = newHeight + "px";
    element.parentNode.style.height = newHeight + "px";
    element.parentNode.style.display = "block";
}
</script>
<script for="window" language="jscript">
// Script For Microsoft
function openWindow(href) {
    var win = document.createElement("DIV");
    win.id = "window";
    var iframe = document.createElement("iframe");
    iframe.id = "frame1";
    iframe.src = href;
    iframe.seamless = "seamless";
    iframe.scrolling = "no";
    win.appendChild(iframe);
    if (iframe.attachEvent) {
        iframe.attachEvent('onload',function(){
        var newHeight = iframe.contentWindow.document.body.scrollHeight;
        frameId = iframe.id;
        var frameId= document.getElementById(frameId);
        frameId.setAttribute('height',newHeight+'px');
        frameId.style.height = newHeight+'px';
        frameId.parentNode.style.display = "block";
    });
} else {
        iframe.onload = alert("Other than IE Iframe loaded");
}
document.body.appendChild(win);
</script>

Upvotes: 0

Related Questions