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”在第一次调用时未定义。

任何可能导致这一问题的线索都将不胜感激。

Answer 1

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

布局/回流过程采用页面的DOM和页面具有的任何样式，并确定元素和页面其他部分的位置和尺寸(您可以尝试阅读Notes on HTML reflow，尽管它不是针对web开发人员的，并且可能有点过时)。

在对DOM进行任何更改后，此回流过程不会同步运行，否则代码如下

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

会更新布局两次，效率很低。

另一方面，请求元素位置/尺寸(至少通过.offsetTop)可以强制布局返回正确的信息。由于某种原因，这种情况在你的情况下不会发生，我不确定为什么。

请创建一个简单的测试用例来演示这个问题，并在bugzilla.mozilla.org (CC me - asqueella@gmail.com)中提交一个错误。

我猜这与XUL布局有关，XUL布局不如HTML健壮；您可以尝试在iframe中的HTML文档中创建云，或者至少在使用createElementNS创建真正的HTML元素instead of xul:div时使用当前代码创建。

Answer 2

注意:注意，如果您将getBoundingClientRect与包含display:none的元素一起使用，则它将在dom中的任何位置返回0。

Answer 3

确保DOM已经准备好了。在我的例子中是，即使在单击事件上使用getBoundingClientRect函数。当DOM准备就绪时需要发生的事件的绑定。