内容脚本：Page-worker - 宽度为 0 的 <body> 元素答案

【问题标题】：Content Scripts: Page-worker - <body> element with 0 width内容脚本：Page-worker - 宽度为 0 的 <body> 元素
【发布时间】：2014-12-01 20:10:40
【问题描述】：

我想自动打开一个网站并显示有关渲染 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 控制台上执行完全相同的命令，则返回值完全正确。

【问题讨论】：

您是否确定您尝试使用页面工作者打开的网站没有内容安全策略？我遇到了这个，没有明显的出路......stackoverflow.com/q/27085661/948073
是的，因为对于 dom 树中更深的某些元素，这些值是合法的。对不起，我应该写的。

标签： javascript css dom firefox-addon firefox-addon-sdk

【解决方案1】：

你这样做的方式很有趣。

您不必通过getElementsByTagName 来获取body 元素，它是document 对象var body = document.body; 的属性
getComputedStyle 是 window 对象的一个函数，所以这就是为什么它可以在没有你把 window. 放在它前面但仍然想让你知道的情况下工作的原因。
你不做getPropertyValue 这是getComputedStyle 所必需的，我只是在没有它的情况下尝试过它并且它工作但我以前从未见过它像这样使用所以也许这与它有关：

从引导程序或暂存器窗口执行此操作：gBrowser.contentWindow.getComputedStyle(gBrowser.contentDocument.body).getPropertyValue('width')

为我工作。

从你的内容脚本范围做：

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

如果它仍然无法正常工作，我会想也许我可能会，你可能会提前执行代码。让我知道它是如何工作的。

【讨论】：

感谢您的回答。事实上，对于某些元素，宽度、高度等都有合法值。所以我不认为它根本不起作用。它只是失败了身体的根元素。它也不会执行得太晚，因为如果未指定内容脚本，则会在加载 dom 和外部资源时执行。