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

Question

问题上下文

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

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

---

此处的示例演示：

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

（如果您立即单击 Tab3 （在iframe所在的位置使它可见），或者如果您等待两次，就会发现高度的报告方式有所不同。加载后几秒钟，然后点击 Tab3 ）

---

在显示元素后立即无法在元素上写height。

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

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

什么是可靠的，跨浏览器的方式来获取隐藏元素的高度，即使该元素处于隐藏状态（或在变得可见的过程中）？

我的解决方案

此刻我：

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

注意（实际问题）

我正在尝试寻找较少的 hacky 作为可能的解决方案；所以我想避免：

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

Answer 1

有点笨拙，但不是显示：无（我想这就是它的隐藏方式），您可以设置以下内容：

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

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