背景:
我目前正在一个项目中,我的JS应用程序已嵌入到其他多个(父)JS应用程序中。通过将display:block/none设置为包含我的应用程序的某些元素,某些父应用程序可以显示/隐藏我的应用程序。其他父级应用程序暂时将我的应用程序从DOM中删除,并在以后重新附加。很少有父应用程序使用影子dom,因此我无权访问父应用程序中的元素。
我需要一种方法来检查我的应用程序是否可见(在DOM内部并显示;不关心可见性:隐藏且不必在视口(viewport)内),而无需更改父应用程序,因此我研究了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
不是要提示当前的行为,而是要提出一个设计问题:返回null而不是null,可以返回一些非法的Rect值(例如,负宽度和高度)是更有用的选择吗?
最佳答案
首先,我将研究流行的库(如jQuery)如何解决类似的问题。以下是指向jQuery源的一些链接:
另外,我会在网上搜索包括MDN在内的任何线索:
不幸的是,检查
getBoundingClientRect
的行为在大多数浏览器中是否相同的最好方法是在这些浏览器中进行实际测试。如果这样做,请返回MDN并添加您的发现。尽管在这种情况下返回null似乎是合乎逻辑的,但实际上并不理想,因为通常它返回具有top,right,bottom,left,left和width属性的 ClientRect 对象,并且这样的代码会中断:
console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null
换句话说,API不会以这种方式保持一致。