getBoundingClientRect 检测可见性

Question

背景： 我目前正在开发一个项目，我的 JS 应用程序嵌入到多个其他（父）JS 应用程序中。某些父应用程序可以通过将 display:block/none 设置为包含我的应用程序的某些元素来显示/隐藏我的应用程序。其他父应用程序暂时从 DOM 中删除我的应用程序并稍后重新附加它。很少有父应用使用shadow dom，所以我无权访问父应用中的元素。

我需要一种方法来检查我的应用程序是否可见（在 DOM 内并显示；不关心可见性：隐藏且不必在视口内），而不更改父应用程序，所以我调查了getBoundingClientRect.

问题： 至少在 chrome 上，如果元素或其祖先具有 display:none 或从 DOM 中删除，getBoundingClientRect 返回 (w:0,h:0,l:0,t:0)。我找不到任何关于保证这种行为的文档，我想知道，使用 getBoundingClientRect 来检查元素的可见性是否安全（从某种意义上说，这个逻辑不会改变）。

我还需要知道这种行为在所有主要浏览器中是否一致，包括 FF、IE8+ 和 Safari。这在任何地方都有记录吗？

最后，为什么是 (0,0,0,0)？我觉得 getBoundingClientRect 在 (0,0,0,0) 实际上意味着不同的情况下应该返回 null。这样做有充分的理由吗？

---

已编辑/附加问题： 感谢 istos 指出返回 null 可能会破坏一些毫无戒心的代码，例如：

console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null

不是抱怨当前的行为，而是作为一个设计问题：返回一些非法的 Rect 值（例如负宽度和高度）代替 null 是否可以成为更有用的选择？

Answer 1

首先我会研究像 jQuery 这样的流行库是如何解决类似问题的。以下是一些 jQuery 源代码的链接：

• https://github.com/jquery/jquery/blob/master/src/css/var/isHidden.js
• https://github.com/jquery/jquery/blob/master/external/sizzle/dist/sizzle.js#L715
• https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js

还有更多我会在网上搜索任何线索，包括 MDN：

• https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
• http://www.nczonline.net/blog/2008/02/04/getting-element-dimensions-a-follow-up
• http://ejohn.org/blog/getboundingclientrect-is-awesome
• http://www.quirksmode.org/blog/archives/2008/02/the_cssom_view.html#link5

不幸的是，检查getBoundingClientRect 的行为在大多数浏览器中是否相同的最佳方法是在这些浏览器中进行实际测试。如果您这样做，请返回 MDN 并添加您的发现。

---

我觉得 getBoundingClientRect 在这种情况下应该返回 null

虽然在这种情况下返回 null 似乎是合乎逻辑的，但实际上并不理想，因为通常它会返回一个具有顶部、右侧、底部、左侧、宽度和高度属性的 ClientRect 对象，以及代码像这样会破坏：

console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null

换句话说，API 不会以这种方式保持一致。