getBoundingClientRect（）在XUL中返回零

Question

我的firefox扩展有问题

我有一个XUL弹出面板，带有一个用于标签云的hbox，以及一个用于向这个hbox添加div的JS代码：

<hbox id="tag_base" ondblclick="alert('done')"/>

JS：

var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)

我需要获取每个添加的div的维度，但是，getBoundingClientRect只是拒绝工作。如果我删除警报，它总是为零。通过警报，故事情况有所不同：第一次调用警报时，它会返回零，尽管div出现在屏幕上。任何后续警报都会返回正确的坐标。

如果我在Chromebug中设置断点，则会正确报告所有内容。如果我没有以任何方式中断执行，并运行循环，则只返回零。

这让我很困惑。调用“boxObject”会产生相同的结果，而“getClientRects [0]”在第一次调用时未定义。

任何可能导致此问题的提示都将不胜感激。

Answer 1

虽然我找不到关于这个看似根本问题的任何文档，但您注意到的问题很可能是因为在您要求坐标时，布局（也称为“回流”）过程尚未运行。

布局/重排过程使页面的DOM具有页面所具有的任何样式，并确定元素的位置和尺寸以及页面的其他部分（您可以尝试阅读Notes on HTML reflow，尽管它不是针对Web开发人员而且可能有点过时）。

在对DOM进行任何更改后，此重排过程不会同步运行，否则代码就像

elt.style.top = "5px";
elt.style.left = "15px";

会更新布局两次，这是低效的。

另一方面，要求元素位置/维度（至少通过.offsetTop）应该强制布局返回正确的信息。出于某种原因，这种情况不会发生在你的情况下，我不确定为什么。

请创建一个简单的测试用例来演示问题并在bugzilla.mozilla.org（CC me - [email protected]）中提交错误。

我的猜测是这与XUL布局有关，它不如HTML强大;您可以尝试在iframe中的HTML文档中创建云，或者至少在<description>中使用createElementNS创建用您当前代码创建的真实HTML元素instead of xul:div。

Answer 2

注意：注意，如果你将getBoundingClientRect与一个display：none的元素一起使用，那么它将在dom中的任何地方返回0。

Answer 3

确保DOM已准备就绪。在我的情况下，即使在点击事件上使用getBoundingClientRect函数。 DOM准备就绪时需要绑定事件。