可靠地获取隐藏元素的高度

Question

问题背景

我需要在加载iframe 的内容后解析它的高度（以适应iframe 元素本身的高度）。问题是，当加载完成时，iframe 可能处于隐藏状态（其容器/父项之一设置为 display:none）。

只要不显示iframe 内容，我就无法找到正确的高度。在 Firefox 上使用 jQuery.height() 会返回 0。

---

这里有一个示例演示：

https://codepen.io/anon/pen/gKBQeP?editors=1111

（如果您立即单击 Tab3（iframe 所在的位置）使其可见，或者您等待几秒钟后，您会注意到报告高度的方式不同加载然后点击Tab3)

---

不能在元素上写height，就在显示之后。

此外，在再次使其可见后，我仍然无法获得内容的真实高度；它仍然返回0，就像它被隐藏一样。我假设是因为 iframe 内容仍在渲染过程中，即使 iframe 的 DOM 树已经显示。 如果我在使其可见几毫秒后setTimeout，那么我可以得到正确的height（这对我来说没有多大意义......????）。

我真的不喜欢设置超时来读取内容高度。

什么是获取隐藏元素高度的可靠、跨浏览器的方法，即使它是隐藏的（或在变得可见的过程中）？

我的解决方案

此刻我：

• 在我知道元素再次可见后立即触发height 的读/写。
• 在读取/写入元素的height 之前，使用setTimeout() 等待半秒（感觉迟钝？？？？）。

注意（实际问题）

我正在努力寻找更少的hacky作为可能的解决方案；所以我想避免：

• 快速显示（或克隆）元素（注意保存+恢复css属性，使其持久化和内联；或注意避免在页面中闪烁），读取尺寸并快速将其设置回隐藏（？ ？？？）。
• 使用setTimeout 等待元素尺寸被恢复（并正确可读/可写），以便在显示元素本身后立即对其进行处理。

Answer 1

这有点 hacky 但不是 display:none （我认为这就是它被隐藏的方式）你可以设置如下：

top: -10000px;
left: -10000px;
position: absolute;

它是“隐藏的”，因为它不可见，但您仍然可以获得它的高度。然后在获得高度后，您可以删除这些样式以使其可见。