getBoundingClientRect检测可见性

Question

背景：我目前正在从事一个项目，在这个项目中，我的JS应用程序被嵌入到多个其他(父) JS应用程序中。一些父应用程序可以通过将display:block/none设置为包含我的应用程序的元素来显示/隐藏我的应用程序。其他父应用程序暂时将我的应用程序从DOM中删除并在稍后重新附加。很少有父应用程序使用影子多姆，因此我无法访问父应用程序中的元素。

我需要一种方法来检查我的应用程序是否是可见的(在DOM中和显示中；不关心可见性:隐藏的，不需要在视口内)，而不改变父应用程序，所以我查看了getBoundingClientRect。

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

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

最后，为什么(0,0,0,0)？我觉得，在(0，0，0，0，0)这样的情况下，getBoundingClientRect应该返回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
• view.html#link5

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

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

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

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

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