Question

我想自动打开一个网站并显示有关渲染DOM的详细信息。为此，我使用了一个页面工作者（https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-worker）。在内容脚本中，我执行以下内容：

var body = document.getElementsByTagName("body")[0];
console.log(getComputedStyle(body).width);
console.log(body.getBoundingClientRect().width);

两个宽度值的输出均为“0”。这同样适用于其他元素。在使用页面工作者时，我是否应该断定DOM元素未正确呈现？有没有办法从中获取真实数据？或者是否有任何其他正确的方法来获取有关渲染DOM的详细信息，其行为与手动在Web浏览器中打开的网站完全相同？因为如果我手动打开同一个网站并执行相同的命令，它当然会（正确地）显示窗口的宽度（1440）。

修改我之前可能应该说过，但是：并不是说获得这些价值根本不起作用。如果我深入研究DOM结构，我会得到正确的值。我想，我只对根体元素有问题。奇怪的是，如果我在firefox控制台上执行完全相同的命令，返回值是完全正确的。

Answer 1

你这样做非常有趣。

您无需getElementsByTagName获取body元素，它是document对象var body = document.body;
getComputedStyle是window对象的函数，因此无需将window.放在其前面，但仍然只是想让您知道它的原因。
你没有做getPropertyValue所需的getComputedStyle，我只是在没有它的情况下尝试了它并且它有效但我从来没有看到它像之前那样使用过，所以也许它与它有关：

所以从bootstrap或从暂存器窗口执行此操作：gBrowser.contentWindow.getComputedStyle(gBrowser.contentDocument.body).getPropertyValue('width')

适合我。

从您的内容脚本范围执行：

window.getComputedStyle(document.body).getPropertyValue('width')

如果它仍然不起作用我可能认为也许是myabe，他们可能会提前执行代码。让我知道它是如何工作的。

内容脚本：Page-worker - 宽度为0的元素

1 个答案: