javascript - getBoundingClientRect 检测可见性

Question

背景：我目前正在开发一个项目，我的 JS 应用程序嵌入到多个其他（父）JS 应用程序中。某些父应用程序可以通过将 display:block/none 设置为包含我的应用程序的某些元素来显示/隐藏我的应用程序。其他父应用程序暂时从 DOM 中删除我的应用程序并稍后重新附加它。很少有父应用程序使用影子 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 似乎是合乎逻辑的，但它实际上并不理想，因为通常它返回一个具有 top、right、bottom、left、width 和 height 属性的ClientRect对象，这样的代码会中断：

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

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