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

【问题标题】：How to access element in XUL overlay through javascript?如何通过 javascript 访问 XUL 覆盖中的元素？
【发布时间】：2023-04-07 10:00:02
【问题描述】：

我已经将一个插件加载到我的 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();

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：