Internet Explorer和非常奇怪的iFrame行为案例

5
我正在开发一个窗口系统,但在Internet Explorer中遇到了一个非常奇怪的错误。基本上,这些窗口是绝对定位的div,包含一个iFrame来显示它们的页面并随着它们一起调整大小。在其他所有浏览器中,这都能正常工作,但在IE中,iFrame无法正确显示。我的原始代码如下:
function spawnNewWindow(url, title, type)
{
    //Does another window with that particular type already exist?
    //If so, just point it at the new link without actually spawning a new window.
    var cancelSpawn = false;
    if ( $('.windowType_'+type).length )
    {
        //Update the SRC attribute for the iframe contained within the window. This should effectively
        //reload the window too.
        $('.windowType_'+type).children("iframe").attr("src", "/darknova4/"+url);
    } else {


    //First, create the window
    $("body").append(
    "<div class='window'> \
    <div class='resizeArea'></div> \
    <div class='titlebar'>"+title+"</div> \
    <div class='closeWindow'></div> \
    <div class='windowContent newspawn'><iframe src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
    </div>");

    //Move this window to the top of the stack
    $(".newspawn").parent(".window").css("z-index", windowZIndex++);

    //Set the data for this window's type, will be used to prevent copy windows being open later
    $(".newspawn").addClass("windowType_"+type);

    //Set up the window for moving and resizing and other stuff
    setupWindows();

    //Finally, remove the "newspawn" flag from the window, since it has content and we don't need work with it anymore.
    $(".newspawn").removeClass("newspawn");

    }
}

在Internet Explorer中,这会产生一个空白的白色窗口,这表明是一个不可见的iFrame,因为我所有的窗口页面都有黑色背景。我怀疑这是著名的(仍未完全修复的)z-index错误,因此我进行了以下更改以调整堆叠顺序,并查看是否能找到快速解决方法:
$("body").append(
"<div class='window'> \
<div class='resizeArea'></div> \
<div class='titlebar'>"+title+"</div> \
<div class='closeWindow'></div> \
<div class='windowContent newspawn'><iframe style='position: relative;' src='/darknova4/"+url+"' frameborder='0' width='100%' height='100%' scrolling='auto'></iframe></div> \
</div>");

请注意相对位置,这应该是对象的默认设置,但由于堆叠错误而不是。这段代码的问题在于,窗口出现了,iFrame也出现了,看起来一切正常,直到您尝试使用它。我无法解释为什么,但将鼠标悬停在iFrame上会导致它消失。我在网站上没有与鼠标移动事件相关联的代码,也没有任何与iFrame页面相关的代码会在鼠标悬停时执行任何操作。这真的很奇怪。有人知道它可能表现出这种行为的原因吗?
如果您需要自己查看此行为,请访问www.darknovagames.com上已实现系统的测试,它在Firefox中运行良好,但在IE中非常奇怪。如果您认为有帮助,我可以发布父窗口的CSS和我的鼠标事件JavaScript等更多代码。
感谢任何能够提供关于这种奇怪行为的见解的人。

在IE6中,它的行为略有不同。窗口会显示出来并且可以拖动 - 但是它没有内容(也没有关闭按钮),从页面加载开始就是这样。 - Stringent Software
是的,我肯定要提一下,我很久以前就放弃了对IE6的支持,所有我的网站项目都不再支持IE6。尝试支持两代旧软件似乎有些愚蠢,你知道吗? - Blank
你的 iframe 是否有任何内容?外部 div 的尺寸是多少? - Thevs
2个回答

13

尝试从您在iframe内的HTML元素中删除position: relative。这似乎可以解决IE8(以及IE8的兼容模式)中出现的问题。

更新:高度问题的修复

position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;添加到iframe中,可以解决由上述position: relative更改在IE7和IE8中引起的高度问题。

两个修复程序都已完成,在我的计算机上,该iframe似乎可以在IE7、IE8和模拟IE7的IE8中正常工作。


在IE8版本中,iFrame正常显示是什么意思?这真的很有趣。我想知道为什么在IE8 beta(我可以访问的版本)或IE7中不起作用? - Blank
是的,在IE8中显示出来了。有一个小问题:iframe的高度不够(只有大约100-150像素高),但没有闪烁或消失的情况。在iframe上添加"position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;"可以解决IE8中的高度问题,但会消除iframe内部新闻项的左边距。这真是一个美丽的功能紊乱链。 - Steven Richards
我刚刚仔细阅读了这个:iframe内部的HTML元素将出现在我包含的页面上。它以这种方式工作真是非常有趣。哦,我在想IE是否会尊重iframe页面上HTML元素的z-index并实际使用它?那肯定不是正确的行为,但这将是一个方便的漏洞。我明天会试试看。 - Blank
你不会相信这个。早些时候,我已经将所有iFramed页面的代码都切换到了Strict doctype。然而,我没有删除Transitional doctype,而是将其注释掉了。IE显然忽略了这个注释,并错误地同时应用了两个doctype,这导致了我的大部分问题。这确实是一个奇怪的错误,但现在似乎已经全部解决了。非常感谢您指引我正确的方向。 - Blank

0

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接