我正在开发一个窗口系统,但在Internet Explorer中遇到了一个非常奇怪的错误。基本上,这些窗口是绝对定位的div,包含一个iFrame来显示它们的页面并随着它们一起调整大小。在其他所有浏览器中,这都能正常工作,但在IE中,iFrame无法正确显示。我的原始代码如下:
在Internet Explorer中,这会产生一个空白的白色窗口,这表明是一个不可见的iFrame,因为我所有的窗口页面都有黑色背景。我怀疑这是著名的(仍未完全修复的)z-index错误,因此我进行了以下更改以调整堆叠顺序,并查看是否能找到快速解决方法:
请注意相对位置,这应该是对象的默认设置,但由于堆叠错误而不是。这段代码的问题在于,窗口出现了,iFrame也出现了,看起来一切正常,直到您尝试使用它。我无法解释为什么,但将鼠标悬停在iFrame上会导致它消失。我在网站上没有与鼠标移动事件相关联的代码,也没有任何与iFrame页面相关的代码会在鼠标悬停时执行任何操作。这真的很奇怪。有人知道它可能表现出这种行为的原因吗?
如果您需要自己查看此行为,请访问www.darknovagames.com上已实现系统的测试,它在Firefox中运行良好,但在IE中非常奇怪。如果您认为有帮助,我可以发布父窗口的CSS和我的鼠标事件JavaScript等更多代码。
感谢任何能够提供关于这种奇怪行为的见解的人。
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等更多代码。
感谢任何能够提供关于这种奇怪行为的见解的人。