Question

我正在写一个firefox插件，我正在尝试使用xul叠加来插入canvas元素。问题是，我要插入canvas元素的父xul节点没有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>

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

Answer 1

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

如果没有ID，叠加层就无法工作，它们根本没有其他方法来处理元素。
叠加不能应用于窗口加载时不存在的东西 - 它们是一次性的东西，不能考虑以后创建的动态元素。
叠加层无法应用于匿名元素（在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监视新标签页并相应地插入画布。

如何覆盖xul没有id？

2 个答案: