将 xul 元素插入浏览器，使其随之滚动答案

【问题标题】：insert xul element into browser so it scrolls with it将 xul 元素插入浏览器，使其随之滚动
【发布时间】：2014-11-18 21:32:43
【问题描述】：

我正在尝试在 gBrowser.selectedBrowser 元素中插入一个 xul 元素，以便该 xul 元素随文档节点一起滚动。

我用这段代码创建并添加了一个盒子：

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElementNS('http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul','box');
var props = {
    style: 'width:300px;height:100px;background-color:red;'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}

gBrowser.selectedBrowser.appendChild(panel);

问题是盒子在任何地方都看不到。虽然它在 dom 检查中：

【问题讨论】：

尝试将其添加到浏览器元素之外，而不是内部。浏览器的行为类似于 iframe，它可能不会呈现其子元素。
谢谢@the8472 我试过这样做，但它不会随着文档滚动:(
您必须通过 javascript 手动滚动它。否则，您必须将其作为匿名节点插入到文档本身中。
啊，这是个好主意，我不认为文档中的匿名节点会起作用。那么如果它是匿名的，我们可以将 xul 放入 html 文档中？
不，我认为这行不通，因为 XUL 不再允许在内容中使用，只能在 chrome 中使用。所以你要么必须通过 JS 对齐，要么直接注入内容

标签： firefox-addon xul

【解决方案1】：

正如上面 cmets 中所述，问题是 <browser> 元素不呈现其内容，类似于 <iframe>。

让框随内容滚动的选项是 a）通过javascript在滚动事件上重新定位您的框 b) 构建与您的盒子等效的 HTML 并将其直接注入到内容中。如果页面内容不受信任，您必须考虑帐户的安全问题，因为它可能会操纵您的插件使用的 DOM。

【讨论】：