“文档”与“内容.文档”答案

【问题标题】：'document' vs. 'content.document'“文档”与“内容.文档”
【发布时间】：2011-08-16 16:49:05
【问题描述】：

我正在尝试编写一个将元素添加到加载页面的 Firefox 扩展。到目前为止，我通过

获得了文档的根元素

var domBody = content.document.getElementsByTagName("BODY").item(0);

并通过

创建新元素

var newDiv = content.document.createElement("div");

实际上，一切都运行良好。但是当我添加一个带有 onclick 属性的按钮时，问题就来了。当按钮正确显示时，我得到一个错误。我已经问过here，并且使用 document.createElement() 的答案（没有内容）有效。

但如果我删除“内容”。到处，真正的麻烦开始了。首先，domBody 为空/未定义，无论我如何尝试访问它，例如document.body （实际上我在文档完全加载之后添加了所有元素。至少我是这么认为的）。其次，所有其他元素看起来都不同。似乎不再考虑样式信息，例如 element.style.width="300px"。

简而言之，使用“content.document”，一切看起来都不错，但 button.onclick 会引发错误。只有“文档”按钮有效，但元素不再正确显示。有没有人看到解决方案。

【问题讨论】：

有一种更简单的访问正文的方法。文档.body
我试过 'document.body' 但它是未定义的，虽然页面是 - 至少应该 - 完全加载
点击按钮时抛出的错误是什么？
@Greg: getElementsByTagName 返回NodeList。您可以使用数组表示法，但.item() 也可以。
在这里查看问题：stackoverflow.com/questions/7066191/…

标签： javascript dom firefox-addon

【解决方案1】：

如果您使用addEventListener ^[MDN]，它应该可以正常工作（至少这是我使用的）。我在某处（我会搜索它）读到，在 chrome 代码中创建元素时，您无法通过属性附加事件侦听器。

你仍然应该使用content.document.createElement：

 Page = function(...) {
   ...
 };

 Page.prototype = {
   ...
   addButton : function() {
     var b = content.document.createElement('button');
     b.addEventListener('click', function() { 
         alert('OnClick'); 
     }, false);
   },
   ...
 };

顺便说一句，我会在某处存储对 content.document 的引用。

【讨论】：

太棒了，它有效！为此非常感谢！ --- 我注意到当我单击按钮时 - 当然会出现警报 - 页面重新加载。为什么会这样，我该如何避免呢？
@Christian：问得好。我不确定。 button 默认是表单提交按钮，但您没有表单。尽管如此，尝试将type 属性的值设置为button：w3.org/TR/html4/interact/forms.html#h-17.5
菲利克斯，你拯救了我的一天......至少你为我节省了很多时间:)。再次感谢您和所有其他人！
@Christian：所以设置type 有效吗？无论如何，欢迎您并愉快地编码！ :)
是的，button.type="button" 做到了！再次感谢！

【解决方案2】：

现有答案没有真正的解释，并且已经有太多的 cmets，所以我将添加另一个答案。当您访问内容文档时，您并没有直接访问它 - 出于安全原因，您通过 a wrapper 访问它，它仅公开实际的 DOM 方法/属性并隐藏页面的 JavaScript 可能添加的任何内容。这有一个副作用，像onclick 这样的属性将不起作用（这实际上是limitations of XPCNativeWrapper 列表中的第一个点）。您应该改用addEventListener。这具有额外的优势，即多个事件侦听器可以共存，例如网页不会通过设置 onclick 本身来删除您的事件侦听器。

旁注：您的脚本在浏览器窗口中执行，因此document 是包含浏览器用户界面的 XUL 文档。没有<body> 元素，因为XUL 文档没有。添加按钮不会影响所选标签中的页面，只会弄乱浏览器的用户界面。全局变量 content 引用当前选定选项卡的 window 对象，因此如果您想使用它，这是您的入口点。

【讨论】：

感谢弗拉基米尔的解释！我只发现提到各种差异的零碎。我总是喜欢为什么我的解决方案确实有效，或者为什么不：)。