javascript - “文档”与 'content.document'

Question

我正在尝试编写一个 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 会引发错误。只有“文档”按钮有效，但元素不再正确显示。有没有人看到解决方案。

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