jQuery show/fadeIn 不将 display:block 应用于隐藏的父元素内的子元素 - 仅限 FireFox

Posted 2023-05-09

【中文标题】jQuery show/fadeIn 不将 display:block 应用于隐藏的父元素内的子元素 - 仅限 FireFox

【英文标题】：jQuery show/fadeIn Does not apply display:block to a child element inside a hidden parent element - FireFox ONLY

【发布时间】：2013-12-27 01:12:47

【问题描述】：

问题：仅限 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() 时子元素都应更新为可见状态（当然，在父元素显示之前保持隐藏状态）。

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

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

谢谢！

更新

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

家长小提琴：http://jsfiddle.net/kaizen5/BxkxB/

iFrame Fiddle：http://jsfiddle.net/pQqXc/（此页面上有一个容器在加载时可见）

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

“好”按钮显示 iFrame 并（重新）分配“src”以强制重新呈现页面。这一次，加载事件触发就好了。

【问题讨论】：

您能否提供指向您页面的链接？或者，最好是一个简化版本的链接（只显示问题，没有别的）？您的问题现在包含太多未知数... iframe 是如何隐藏的；如果它总是隐藏的，你为什么要关心它的内容是什么样的等等。

我的意思是，我制作了a fiddle，它只是表明它在所有浏览器中都有效，所以你的情况与此不同。

嗨，Lister 先生，很遗憾，我没有什么可以公开分享的。让我试着解释一下。 iFrame 默认是隐藏的。同样，iFrame 中的某些元素也被隐藏了。在 iFrame 页面加载时，我选择性地在 iFrame 中显示这些元素（iFrame 仍处于隐藏状态）。 iFrame 保持隐藏状态，直到发生用户事件。显示 iFrame 时，编程显示的输入不可见。这仅在 FireFox 中以及在使用 jQuery 的 show() 或 fadeIn() 时。

你能做一个小提琴或任何显示问题的东西吗？在重新阅读时，我意识到我不知道show() 调用是在哪里以及如何完成的。在 iframe 内部，元素是否最初隐藏（如果是，那么究竟是如何隐藏的）然后在 onload 中显示？或者它们是否可以从父页面中的调用中看到？如果是这样，什么时候、之前或之后 iframe 可见？此外，iframe 本身是如何隐藏并准确显示的？这些细节很重要。请创建一个小的、独立的、完整的示例，该示例以相同的方式工作并显示相同的问题。

我不会写评论，而是用新信息更新票证。

【参考方案1】：

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

问题在于 show() 函数在这种特殊情况下无法正常工作 - onload 在隐藏时在 iframe 中运行。

将$('...').show() 替换为$('...').css('display','inline') 就可以了。

在 Firefox 和 Chrome 中查看这个小提琴组合页面 http://jsfiddle.net/xZdLx/4/ 和 iframe http://jsfiddle.net/L3Lxn/10/。

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

解决方法

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