javascript - 'document' vs. 'content.document' - Stack Overflow

admin管理员组

文章数量:1315327

I'm trying to write a Firefox extension that adds elements to the loaded page. So far, I get the root element of the document via

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

and create the new elements via

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

and everything worked quite well, actually. But the problems came when I added a button with on onclick attribute. While the button is correctly displayed, I get an error. I already asked asked here, and the answer with document.createElement() (without content) works.

But if I remove the 'content.' everywhere, the real trouble starts. Firstly, domBody is null/undefined, no matter how I try to access it, e.g. document.body (And actually I add all elements _after_the document is fully loaded. At least I think so). And secondly, all other elements look differently. It's seem the style information, e.g., element.style.width="300px" are no longer considered.

In short, with 'content.document' everything looks good, but the button.onclick throws an error. with only 'document' the button works, but the elements are no longer correctly displayed. Does anybody see a solution for that.

I'm trying to write a Firefox extension that adds elements to the loaded page. So far, I get the root element of the document via

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

and create the new elements via

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

and everything worked quite well, actually. But the problems came when I added a button with on onclick attribute. While the button is correctly displayed, I get an error. I already asked asked here, and the answer with document.createElement() (without content) works.

But if I remove the 'content.' everywhere, the real trouble starts. Firstly, domBody is null/undefined, no matter how I try to access it, e.g. document.body (And actually I add all elements _after_the document is fully loaded. At least I think so). And secondly, all other elements look differently. It's seem the style information, e.g., element.style.width="300px" are no longer considered.

In short, with 'content.document' everything looks good, but the button.onclick throws an error. with only 'document' the button works, but the elements are no longer correctly displayed. Does anybody see a solution for that.

• javascript
• dom
• firefox-addon

Share Improve this question Follow edited May 23, 2017 at 12:26 CommunityBot 111 silver badge asked Aug 15, 2011 at 16:49 ChristianChristian 3,40377 gold badges4444 silver badges8585 bronze badges 5

• 2 There is a more easy way to access body. document.body – Mohsen Commented Aug 15, 2011 at 16:54
• I tried 'document.body' but it is undefined, although the page is - at least should be - fully loaded – Christian Commented Aug 15, 2011 at 16:57
• What is the error that is thrown when you click the button? – Felix Kling Commented Aug 15, 2011 at 16:58
• @Greg: getElementsByTagName returns a NodeList. You can use array notation, but .item() is fine too. – Felix Kling Commented Aug 15, 2011 at 16:59
• See the question here: stackoverflow./questions/7066191/… – Christian Commented Aug 15, 2011 at 16:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

It should work fine if you use addEventListener ^[MDN] (at least this is what I used). I read somewhere (I will search for it) that you cannot attach event listener via properties when creating elements in chrome code.

You still should use content.document.createElement though:

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

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

I would store a reference to content.document somewhere btw.

The existing answer doesn't have a real explanation and there are too many ments already, so I'll add another answer. When you access the content document then you are not accessing it directly - for security reasons you access it through a wrapper that exposes only actual DOM methods/properties and hides anything that the page's JavaScript might have added. This has the side-effect that properties like onclick won't work (this is actually the first point in the list of limitations of XPCNativeWrapper). You should use addEventListener instead. This has the additional advantage that more than one event listener can coexist, e.g. the web page won't remove your event listener by setting onclick itself.

Side-note: your script executes in the browser window, so document is the XUL document containing the browser's user interface. There is no <body> element because XUL documents don't have one. And adding a button won't affect the page in the selected tab, only mess up the browser's user interface. The global variable content refers to the window object of the currently selected tab so that's your entry point if you want to work with it.

本文标签： javascript39document39 vs 39contentdocument39Stack Overflow