javascript - 如何通过javascript访问XUL覆盖中的元素？

Question

我已经将一个插件加载到我的 XUL 覆盖层中，通过

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

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

var caller = myEvent.originalTarget;

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

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 样式更好。