'Document' vs 'contenu.document'

J'essaie d'écrire une extension Firefox qui ajoute des éléments à la page chargée. Jusqu'à présent, je reçois l'élément racine du document via

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

Et créer les nouveaux éléments via

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

Et tout a bien fonctionné, en fait. Mais les problèmes sont survenus lorsque j'ai ajouté un bouton avec l'attribut onclick. Alors que le bouton est correctement affiché, j'ai une erreur. J'ai déjà posé la question ici , et la réponse avec document.createElement () (sans contenu) fonctionne.

Mais si je supprime le «contenu». Partout, le véritable problème commence. Tout d'abord, domBody est nul / indéfini, peu importe la façon dont j'essaie d'y accéder, par exemple document.body (Et en fait, j'ajoute tous les éléments après que le document est complètement chargé. Au moins, je pense). Deuxièmement, tous les autres éléments sont différents. Il semble que l'information de style, par exemple, element.style.width = "300px" ne soit plus considérée.

Bref, avec 'content.document', tout se passe bien, mais le bouton.onclick lance une erreur. Avec seulement 'document', le bouton fonctionne, mais les éléments ne sont plus correctement affichés. Est-ce que quelqu'un voit une solution pour cela?

Cela devrait fonctionner correctement si vous utilisez addEventListener ^[MDN] (au moins, c'est ce que j'ai utilisé). J'ai lu quelque part (je vais le chercher) que vous ne pouvez pas attacher l'auditeur d'événement via les propriétés lors de la création d'éléments en code chrome.

Vous devez toujours utiliser content.document.createElement :

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

Je voudrais stocker une référence à content.document quelque part btw.

La réponse existante n'a pas d'explication réelle et il y a trop de commentaires déjà, alors je vais ajouter une autre réponse. Lorsque vous accédez au document de contenu, vous ne l'accédez pas directement – pour des raisons de sécurité, vous accédez à un wrapper qui n'expose que les méthodes / propriétés DOM réelles et masque tout ce que le JavaScript de la page pourrait avoir ajouté. Cela a l'effet secondaire que les propriétés comme onclick ne fonctionneront pas (c'est en fait le premier point de la liste des limitations de XPCNativeWrapper ). Vous devez utiliser addEventListener place. Cela a l'avantage supplémentaire que plus d'un auditeur d'événement peut coexister, par exemple, la page Web ne supprimera pas votre auditeur d'événement en configurant onclick lui-même.

Note latérale: votre script s'exécute dans la fenêtre du navigateur, de sorte que le document est le document XUL contenant l'interface utilisateur du navigateur. Il n'y a pas d'élément <body> car les documents XUL n'en ont pas. Et l'ajout d'un bouton n'affectera pas la page dans l'onglet sélectionné, ne gâchez que l'interface utilisateur du navigateur. Le content variable globale se réfère à l'objet de window de l'onglet actuellement sélectionné, de sorte que c'est votre point d'entrée si vous souhaitez travailler avec celui-ci.