2

我正在编写一个 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

4

2 回答 2

2

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

  1. 没有 ID，叠加就无法工作，它们根本没有其他方法来寻址元素。
  2. 覆盖不能应用于窗口加载时不存在的东西——它们是一次性的，不能考虑以后创建的动态元素。
  3. 覆盖不能应用于匿名元素（在 DOM Inspector 中显示为红色）。这些元素由 XBL 绑定注入，不是 XUL 文档的一部分。

您将不得不使用 JavaScript 并每次“手动”注入您的画布。您可以使用该TabOpen事件在打开选项卡时获得通知。像这样的东西应该可以工作（未经测试的代码）：

// 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 分配给十几个元素。

于 2012-05-26T08:24:53.140 回答
1

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

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

于 2012-05-26T06:04:10.060 回答