Question

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

获取了文档的根元素

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

并通过

创建新元素

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

实际上，一切都很顺利。但是当我在onclick属性上添加一个按钮时出现了问题。按钮正确显示，我收到错误。我已经问过here，并且document.createElement（）（没有内容）的答案有效。

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

简而言之，对于'content.document'，所有看起来都很好，但是button.onclick会抛出错误。只有'文档'按钮可以工作，但元素不再正确显示。有没有人看到解决方案。

Answer 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的引用。

Answer 2

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

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

'document'与'content.document'

2 个答案: