javascript - getElementById XBL 绑定(bind)的 XUL 元素

Question

我正在尝试访问 XBL 绑定(bind)的 XUL 元素。我想通过 JavaScript 来控制它。

这是绑定(bind)。

<binding id="imip-throbber">
    <resources>
          <stylesheet src="chrome://lightning/skin/lightning-widgets.css"/>
    </resources>
    <content pack="center" align="center">
        <xul:image anonid="loading-throbber" src="chrome://global/skin/icons/loading_16.png" hidden="false"/>
    </content>
</binding>

这是 CSS 绑定(bind)

imip-throbber {
  -moz-binding: url(chrome://lightning/content/lightning-widgets.xml#imip-throbber);
}

这是 xul 实现

<

lightning-notification-bar id="imip-bar"
                                    collapsed="true"
                                    insertbefore="msgHeaderView"
                                    label="&lightning.imipbar.description;">

          <button id="imip-button1"
                  class="imip-button"
                  hidden="true"/>
          <button id="imip-button2"
                  class="imip-button"
                  hidden="true"/>
          <button id="imip-button3"
                  class="imip-button"
                  hidden="true"/>

    <imip-throbber id="loading-lbl">
</lightning-notification-bar>

这是 javascript 访问

let imipThrobble = document.getElementById("loading-lbl");

该 javascript 行下面的代码似乎没有被执行。我需要在绑定(bind)处添加一些内容才能访问该元素吗？

Answer 1

不容易...

documentation on XBL MDN 是这样描述 XBL 自动添加的“匿名”内容的:

The elements within the content tag [of the XBL binding xml file] are added to the scroll bar anonymously. Although anonymous content is displayed on screen, you cannot get to it through a script in the normal way. To the XUL, it's as if there was only one single element, even though it is really made up of a number of elements.

(强调我的)。

无论如何......

MDN 上的 XBL 1.0 引用继续说道

In effect the anonymous content exists in its own insulated pocket within the document. Using parentNode, anonymous content nodes can refer to their explicit parents, but explicit parents have no knowledge of their anonymous children. The anonymous content is not accessible via the childNodes list for the bound element, nor is it accessible using firstChild/nextSibling to iterate over the children of the bound element. The anonymous content is accessible only through special methods like getAnonymousNodes and getAnonymousElementByAttribute.

因此，您可以使用 getAnonymousNodes/getAnonymousElementByAttribute 来获取 XBL 绑定(bind)自动插入的匿名内容。这些方法主要由绑定(bind)本身(或与之相关)的 JavaScript 代码使用，但是，您可以从绑定(bind)到 XUL DOM 的 JavaScript 中使用它们。一些examples在 MDN。

但是为什么呢？

更好的问题是，为什么您想要从绑定(bind)到 XUL DOM 的 JavaScript 访问这些元素？

一个很好的原因可能是您没有编写绑定(bind)，并且您希望使用一些不同的内容/行为即时“升级”它们。另一方面，如果您确实编写了相关的 XBL 绑定(bind)，为什么不在绑定(bind)到 XBL 元素的 JavaScript 中完成您想要做的事情呢？您可以添加 JavaScript methods到已经可以访问匿名内容的元素(以及 XUL DOM 的其余部分)。