iframe onload 可在 Chrome 中调整大小，但不适用于 IE 或 Firefox

Question

我正在使用 javascript 在 div 中创建一个 iframe，以产生在网站上打开窗口的错觉。到目前为止，我有一个在 chrome 中运行良好的脚本，但在 IE 或 Firefox 中无法正常运行。脚本如下：

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";

}

当我声明变量 newHeight 时，问题就出现了。我发现虽然 Chrome 可以成功找到 element.contentWindow.document.body.scrollHeight，但 Firefox 和 IE 却没有（它们返回 0）。这会导致问题浏览器中的窗口 div 被压扁（高度：0）。

我的问题是 a) 我怎样才能以这样的方式编写它以使其在有问题的浏览器中工作，或者 b) 是否有一种更简单的方法来处理外部页面，例如我的登录表单，在一个窗口中用户的当前页面？

谢谢。

Answer 1

我发现了问题。我将窗口 div 的 style.display 设置为“none”，并在 iframe 和所有内容都加载后将其更改为“block”。不幸的是 - 在 IE 和 Firefox 中，但不是在 Chrome 中 - iframe 的高度变量无法在“无”状态下检索。

我已经改变了我的加载方法，一切都很好。

Answer 2

希望，以下代码会有所帮助！

<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>