javascript - jQuery show/fadeIn 不应用显示 :block to a child element inside a hidden parent element - FireFox ONLY

Question

问题:仅限 FireFox。

在页面加载时，我有一个隐藏的 iFrame(我不控制父页面)。在这个 iFrame 中，我有基于状态隐藏/显示的元素，并使用 jQuery show()/fadeIn() 来处理它。

当 iFrame 在页面加载时隐藏(它总是隐藏)时，display:block 或 display:inline-block 不会应用于这些元素。如果 iFrame 在页面加载时可见，则子元素将得到正确处理并分配给 display:block。

我知道我可以通过简单地使用 $el.css('display', 'block') 来解决这个问题，但我想了解问题的根源并正确解决它，并且发现这是否是一个 jQuery 错误。为什么 jQuery 不显示基于其父级的元素，为什么这仅 FireFox(Gecko 渲染引擎)？

预期结果:无论父级(iFrame)的可见性或显示如何，在使用 $el.show() 时，子元素都应更新为可见状态(当然，在显示父元素之前保持隐藏状态) .

我已经做了一些广泛的搜索来寻找可靠的答案，但是所有的论坛都没有解决或答案而结束，而是使用了解决方法。

以前有人见过和/或解决过这个问题吗？

谢谢!

更新

当我创建 fiddle 时，我想到了一个解决方案。我对 iFrame 在幕后发生的事情不是 100% 肯定，但现在看到了一个模式。加载事件似乎没有在 iFrame 中触发。

父 fiddle :http://jsfiddle.net/kaizen5/BxkxB/

iFrame fiddle :http://jsfiddle.net/pQqXc/ (此页面上有一个在加载时可见的容器)

您会注意到，当您首先单击 ('bad') 按钮时，它会显示 iFrame 并且 fiddle 看起来是空的。这是因为 Fiddle iFrame 在加载时调用一个函数，该函数应该显示 fiddle 的内容。这模拟了我在自己的解决方案中看到的问题。

“good”按钮显示 iFrame 并(重新)分配“src”以强制重新呈现页面。这一次，加载事件触发得很好。

Answer 1

这实际上不是 Firefox 中 onload/onready 未触发的问题。因为确实如此。

这个问题非常具体地与 show() 函数在这种特定情况下不起作用 - onload 在隐藏时在 iframe 中运行。

将 $('...').show() 替换为 $('...').css('display','inline')它工作正常。

请参阅此 fiddle 组合页面 http://jsfiddle.net/xZdLx/4/和 iframe http://jsfiddle.net/L3Lxn/10/在 Firefox 与 Chrome 中。

确实是一个非常奇怪的错误，无论是 jQuery 还是 Firefox 中的错误，而且是一个很好的发现。

解决方法

正如您自己发现的，如果您首先显示 iframe，然后通过更新 iframe 的 src 属性强制 Firefox 重新加载页面，show() 将起作用。