'document'与'content.document'

Question

我正在尝试编写一个Firefox扩展,为加载的页面添加元素.到目前为止,我得到了文档的根元素

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

并通过创建新元素

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

实际上,一切都很顺利.但是当我在onclick属性上添加一个按钮时出现了问题.按钮正确显示,我收到错误.我已经问过这里的问题,而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。