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应该在这种情况下返回null,因为(0,0,0,0)实际上意味着不同的东西.这有充分的理由吗？

---

编辑/附加问题:感谢istos指出返回null可能会破坏一些毫无疑问的代码,例如:

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

不要抱怨当前的行为,而是作为一个设计问题:而不是null,可以返回一些非法的Rect值(例如负宽度和高度)是一个更有用的替代方案吗？

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 不会保持一致。