如何覆盖没有id的xul？

Question

我正在编写一个 firefox 插件，并且我正在尝试使用 xul 覆盖来插入一个画布元素。问题是，我要插入画布元素的父 xul 节点没有 id。如果没有id可以吗？我还尝试将 anonid 用于没有 id 的元素，如下所示，但也没有运气。

我的 xul 叠加层：

<?xml version="1.0"?>
<overlay id="myOverlay" 
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         xmlns:html="http://www.w3.org/1999/xhtml">

    <tabbrowser id="content">
        <tabbox anonid="tabbox">
            <tabpanels anonid="panelcontainer">
                <notificationbox>
                    <stack anonid="browserStack">
                        <html:canvas id="myCanvas" height="100%" />
                    </stack>
                </notificationbox>
            </tabpanels>
        </tabbox>
    </tabbrowser>

</overlay>

我希望在每个选项卡中的每个浏览器元素之后插入画布元素，如下所示：http://img.photobucket.com/albums/v215/thegooddale/80eae9ee.jpg

Answer 1

尝试为此使用叠加层存在多个问题：

1. 如果没有 ID，叠加层将无法工作，它们只是没有其他方法来处理元素。
2. 叠加不能应用于加载窗口时不存在的内容 - 它们是一次性的，不能考虑稍后创建的动态元素。
3. 覆盖不能应用于匿名元素（在 DOM Inspector 中显示为红色）。这些元素由 XBL 绑定注入，不属于 XUL 文档。

您每次都必须使用 JavaScript 并“手动”注入您的画布。您可以使用TabOpen event 在打开选项卡时收到通知。这样的东西应该可以工作（未经测试的代码）：

// Always wait for the window to initialize first
window.addEventListener("load", function()
{
  function initTab(tab)
  {
    var browser = window.gBrowser.getBrowserForTab(tab);
    var canvas = document.createElementNS("http://www.w3.org/1999/xhtml",
                                          "canvas");
    canvas.setAttribute("anonid", "myCanvas");
    canvas.setAttribute("height", "100%");
    browser.parentNode.appendChild(canvas);
  }

  // Init all existing tabs first
  var tabs = window.gBrowser.tabs;
  for (var i = 0; i < tabs.length; i++)
    initTab(tabs[i]);

  // Listen to TabOpen to init any new tabs opened
  window.gBrowser.tabContainer.addEventListener("TabOpen", function(event)
  {
    initTab(event.target);
  }, false);
}, false)

请注意，此代码设置anonid 属性而不是id - ID 应该是唯一的，您不应将相同的 ID 分配给十几个元素。

Answer 2

如果没有 id，这将无法工作。您可以在 XUL 文档中插入一段 Javascript，使用 document.querySelector 在 XBL 绑定中查找 tabpanels，然后将动态创建的 canvas 附加到 id。

但是，由于每次打开新标签时都会创建一个新的notificationbox，因此您应该让 JavaScript 监视新标签并相应地插入画布。