dom – getBoundingClientRect()在XUL中返回零

dom – getBoundingClientRect()在XUL中返回零,第1张

概述我的firefox扩展有问题 我有一个带标签云的hbox的XULd出式面板,以及一个向这个hbox添加div的JS代码: <hbox id="tag_base" ondblclick="alert('done')"/> JS: var root = document.getElementById('tag_base');var tag = document.createElement('div' 我的firefox扩展有问题

我有一个带标签云的hBox的Xuld出式面板,以及一个向这个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]”在第一次调用时未定义.

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

解决方法 虽然我找不到关于这个看似根本问题的任何文档,但您注意到的问题很可能是因为布局(也就是“回流”)过程在您要求坐标时尚未运行.

布局/重排过程使页面的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布局有关,它不如HTML强大;您可以尝试在iframe中的HTML文档中创建云,或者至少在< description>中创建云.使用createElementNS创建您使用当前代码创建的真实HTML元素instead of xul:div.

总结

以上是内存溢出为你收集整理的dom – getBoundingClientRect()在XUL中返回零全部内容,希望文章能够帮你解决dom – getBoundingClientRect()在XUL中返回零所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1132124.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)

保存