在XUL中，getBorbingClientRect()返回零 [英] getBoundingClientRect() is returning zero in XUL

问题描述

我的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的维度，但是，getBorbingClientRect根本不起作用。 如果我取消警报，它总是零。 有了警报，情况就不同了： 第一次调用警报时，它会返回零，尽管屏幕上会显示div。 任何后续警报都返回正确的坐标。

如果我在Chromebug中设置了断点，一切都会正确报告。 如果我不以任何方式中断执行，并运行循环，则只返回零。

这把我弄糊涂了。 调用"boxObject"会产生相同的结果，而"getClientRects[0]"在第一次调用时是未定义的。

如有任何可能导致此问题的提示，我们将不胜感激。

推荐答案

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

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

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

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

将更新布局两次，效率低下。

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

请创建一个简单的测试用例来演示该问题，并在bugzilla.mozilla.org(CC [e-mail])中提交错误。

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

这篇关于在XUL中，getBorbingClientRect()返回零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！