javascript - 内容脚本 : Page-worker - element with 0 width

Question

我想自动打开一个网站并显示有关呈现的 DOM 的详细信息。为此，我使用了一个页面 worker (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”。这同样适用于其他元素。我是否应该断定使用页面 worker 时 DOM 元素未正确呈现？有没有办法从中获取真实数据？或者是否有任何其他正确的方法来获取有关呈现的 DOM 的详细信息，这些 DOM 的行为与手动在 Web 浏览器中打开网站完全一样？因为如果我手动打开同一个网站并执行相同的命令，它当然会(正确地)显示窗口的宽度 (1440)。

编辑我之前可能应该这么说，但是:并不是说获得值(value)根本不起作用。如果我深入 DOM 结构，我会得到正确的值。我认为我只有根体元素有问题。奇怪的是，如果我在 firefox 控制台上执行完全相同的命令，返回值是完全正确的。

Answer 1

你做事的方式很有趣。

1. 您不必执行 getElementsByTagName 来获取 body 元素，它是 document 对象的一个​​属性 var body = document.body;
2. getComputedStyle 是 window 对象的一个​​函数，所以这就是为什么它可以工作而无需将 window. 放在它前面但仍然只是想要让你知道。
3. 您没有执行 getComputedStyle 所需的 getPropertyValue，我只是在没有它的情况下尝试过它并且它有效但我以前从未见过它像那样使用所以也许有与它有关的事情:

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

对我有用。

从你的内容脚本范围做:

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

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