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）。这导致问题浏览器中的压缩（高度：0）窗口div。

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

谢谢。

Answer 1

我发现了这个问题。我把我的窗口div的style.display设置为＆＃34; none＆＃34;并将其改为＆＃34;阻止＆＃34;一旦iframe和所有加载。不幸的是 - 在IE和Firefox中，但在Chrome中却没有 - iframe的高度变量无法在＆＃34; none＆＃34;中检索到。状态。

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

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>

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

2 个答案: