“文檔”與“內容.文檔”

Question

我正在嘗試編寫一個 Firefox 擴展，將元素添加到加載的頁面。 到目前為止，我通過

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

並通過創建新元素

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

實際上，一切都運行良好。 但是當我在 onclick 屬性上添加一個按鈕時，問題就來了。 當按鈕正確顯示時，我得到一個錯誤。 我已經在這里問過，並且 document.createElement() （沒有內容）的答案有效。

但如果我刪除“內容”。 到處，真正的麻煩開始了。 首先，domBody 為空/未定義，無論我如何嘗試訪問它，例如 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的引用。

Answer 2

現有答案沒有真正的解釋，評論已經太多了，所以我會添加另一個答案。 當您訪問內容文檔時，您不會直接訪問它 - 出於安全原因，您通過包裝器訪問它，該包裝器僅公開實際的 DOM 方法/屬性並隱藏頁面的 JavaScript 可能添加的任何內容。 這有副作用，像onclick這樣的屬性將不起作用（這實際上是 XPCNativeWrapper 限制列表中的第一點）。 您應該改用addEventListener 。 這還有一個額外的優勢，即多個事件偵聽器可以共存，例如 web 頁面不會通過設置onclick本身來刪除您的事件偵聽器。

旁注：您的腳本在瀏覽器 window 中執行，因此document是包含瀏覽器用戶界面的 XUL 文檔。 沒有<body>元素，因為 XUL 文檔沒有。 添加按鈕不會影響所選標簽中的頁面，只會弄亂瀏覽器的用戶界面。 全局變量content是指當前選定選項卡的window object，因此如果您想使用它，這是您的入口點。

“文檔”與“內容.文檔”

問題描述

2 個解決方案

解決方案1
4 已采納 2011-08-15 17:07:53

解決方案2
3 2011-08-16 08:48:01

“文檔”與“內容.文檔”

問題描述

2 個解決方案

解決方案1 4 已采納 2011-08-15 17:07:53

解決方案2 3 2011-08-16 08:48:01

解決方案1
4 已采納 2011-08-15 17:07:53

解決方案2
3 2011-08-16 08:48:01