All geek questions in one place

'document' vs. 'content.document'

I am trying to write a Firefox extension that adds elements to a loaded page. So far I get the root element of the document through

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

and create new elements with

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

and actually it worked pretty well. But problems arose when I added a button with the onclick attribute. As long as the button displays correctly, I get an error message. I already asked here , and the answer with document.createElement () (without content) works.

But if I remove the "content". everywhere, the real problem begins. Firstly, domBody is null / undefined, regardless of how I try to access it, for example. document.body (And actually I add all the elements _after_ the document is fully loaded. At least I think so). And secondly, all other elements look different. It seems that style information like element.style.width = "300px" is no longer being considered.

In short, with "content.document" everything looks good, but the button.onclick button causes an error. only with the "document" button works, but the elements are no longer displayed correctly. Does anyone see a solution for this.

+5
source share
2 answers

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

You should still 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 keep a link to content.document somewhere btw.

+4
source

The existing answer does not contain real explanations, and there are already too many comments, so I will add another answer. When you access a content document, you do not access it directly - for security reasons, you access it through a shell that provides only the actual DOM methods / properties and hides everything that the JavaScript page could add. This has the side effect that properties like onclick will not work (this is actually the first point in the list of XPCNativeWrapper restrictions). Instead, you should use addEventListener . This has the added advantage that more than one event listener can coexist, for example. the webpage will not remove the event listener by installing onclick its own.

Side note: your script is executed in a browser window, so document is a XUL document containing the browser user interface. The <body> element is missing because XUL documents do not have it. And adding a button will not affect the page on the selected tab, it will only spoil the browser user interface. The global variable content refers to the window object of the currently selected tab, so your entry point if you want to work with it.

+3
source

Source: https://habr.com/ru/post/895070/

More articles:


All Articles