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

Posted 2023-03-06

【中文标题】Internet Explorer 和非常奇怪的 iFrame 行为案例

【英文标题】：Internet Explorer and the case of the Very Strange iFrame behaviour

【发布时间】：2010-10-22 04:15:17

【问题描述】：

在我正在开发的带有窗口系统的 Internet Explorer 中，我遇到了一个真正的... bizzare 错误。基本上，窗口是绝对定位的 div，其中包含 ah 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 中它的行为略有不同。窗口显示出来并且可以拖动 - 但它没有内容（也没有关闭按钮），从页面加载开始。

是的，我绝对应该提一下，很久以前我的所有网站项目都放弃了对 IE6 的支持。尝试支持 2 代旧软件对我来说似乎很愚蠢，你知道吗？

你的 iframe 有内容吗？外部div的大小是多少？

【参考方案1】：

尝试从 iframe 内的 html 元素中删除 position: relative。这似乎解决了 IE8（以及 IE8 的兼容模式）中的问题。

更新：修复高度问题

在iframe中添加position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;，修复了IE7和IE8上面position: relative变化引起的高度问题。

通过这两个修复程序，iframe 似乎在我的机器上模拟 IE7 的 IE7、IE8 和 IE8 中正常工作。

【讨论】：

意味着在 IE8 版本中，iFrame 会按预期显示？这很有趣。我想知道为什么 id 在 IE8 Beta（这是我可以访问的）或 IE7 中不起作用？

是的，它显示在 IE8 中。小警告：iframe 没有以全高显示（它只有大约 100-150px 高），但没有闪烁或消失。添加“位置：绝对；左：0px；上：0px；下：0px；右：0px；” iframe 也修复了 IE8 中的高度问题，但消除了 iframe 正文中新闻项目的左边距。这真是一连串功能失调的行为。

我刚刚正确地阅读了这个：HTML 元素 inside iframe 将在我包含的页面上。它以这种方式工作非常有趣。嗯...我想知道 IE 是否会尊重 iframe'd 页面上 HTML 元素的 z-index 并实际使用它？这不可能是正确的行为，但它肯定是一个方便的错误。我明天试试看。

你不会相信的。早些时候，我已将 iFramed 页面的代码全部切换为 Strict doctype。但是，我没有删除 Transitional 文档类型，而是将其注释掉。 IE 显然忽略了评论，并且一次错误地应用了两种文档类型，这基本上导致了我的所有问题。确实是奇怪的错误，但现在似乎全部修复了。非常感谢您为我指明了正确的方向。

【参考方案2】：

我认为这与 MS IE 中的 shim 技术问题有关。

IFRAME 是无窗口元素，因此 IFRAME 的 z-index 可能与大纲 DIV z-index 不同步。

请参阅http://support.microsoft.com/default.aspx?scid=http://support.microsoft.com:80/support/kb/articles/q177/3/78.asp&NoWebContent=1 了解更多信息。

也请看this。

（无法正确显示带有名称的 MS KB 链接，可能是 SO 中的错误）。