如何通过javascript访问XUL叠加层中的元素？

Question

我已经通过

将插件加载到我的XUL叠加层中

<vbox style="height:0;">
    <html:embed type="application/x-my-plugin" id="my-plugin" style="height:0;"/>
</vbox>

现在，当用户加载新选项卡并且我有一个对调用者的引用时，会触发一个事件。这是通过javascript完成的，它附加到XUL叠加层。

var caller = myEvent.originalTarget;

当我尝试执行以下操作时，我的变量“plugin”为null。可能是什么问题，我该如何解决这个问题？

var plugin = caller.getElementById("my-plugin");
plugin.calculateTime();

Answer 1

我认为您的真实代码使用document.getElementById而不是caller.getElementById。如果document.getElementById返回null，那么具有此ID的元素肯定不在文档中。这可能有两个原因：

1. 您过早访问该文档但未完成加载。您通常不应在load事件之前访问DOM，这可能会导致各种问题。但是，如果您的代码来自TabOpen事件，那么这不应该是问题。
2. 当您的叠加层合并到浏览器窗口时，会跳过此特定元素。如果叠加层顶层的元素没有ID，或者在文档中找不到它们的ID，则会忽略它们的顶层元素。为了考虑您的元素，您的叠加层应如下所示：

<overlay ...>
  <window id="main-window">
    <vbox collapsed="true">
      <html:embed .../>
    </vbox>
  </window>
</overlay>

main-window是browser.xul的根元素的ID，以便您的元素将插入顶层。请注意，我使用collapsed attribute，如果您需要一个不占用任何空间但仍处于初始化状态的元素，那么这比设置height样式要好。