Iframe onload 调整大小在 Chrome 中有效，但在 IE 或 Firefox 中无效

Question

我正在使用 javascript 在 div 中创建一个 iframe，以产生在网站上打开 window 的错觉。到目前为止，我的脚本在 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 却没有（它们 return 0）。这会导致问题浏览器中的 (height: 0) window div 被压扁。

我的问题是 a) 我怎样才能以在有问题的浏览器中工作的方式编写它，或者 b) 是否有更简单的方法总体上处理外部页面，例如我的登录表单，在 window 越过用户的当前页面？

谢谢。

Answer 1

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

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

Answer 2

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

后来我改变了加载方式，一切正常。

Iframe onload 调整大小在 Chrome 中有效，但在 IE 或 Firefox 中无效

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

javascript

html

iframe

window