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

Question

问题背景

加载 iframe 后，我需要解析 content 的 height(以适应 的高度>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 (这对我来说没有多大意义....🤔)。

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

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

我的解决方案

此刻我:

• 在我知道该元素再次可见后立即触发对高度的读/写。
• 在读取/写入元素的高度之前，使用setTimeout()等待半秒(感觉很慢😒)。

注意(实际问题)

我正在努力寻找不那么hacky 的可能解决方案；所以我想避免:

• 快速显示(或克隆)元素(注意保存+恢复 css 属性，使它们持久化和内联；或注意避免页面闪烁)，读取尺寸并快速将其设置回隐藏状态(😖 ).
• 使用 setTimeout 等待元素尺寸恢复(并且可正确读/写)，以便在显示元素本身后立即处理它们。

Answer 1

这有点 hacky 但不是显示:无(我假设这就是它被隐藏的方式)你可以设置如下:

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

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