需要使用 xul 在 Firefox 扩展构建中创建基于 xul 的框架答案

【问题标题】：Need to create xul based frame in firefox extension build using xul需要使用 xul 在 Firefox 扩展构建中创建基于 xul 的框架
【发布时间】：2016-11-21 11:01:48
【问题描述】：

我想在我的一个 Firefox 扩展中创建基于 xul 的框架。框架应该看起来像https://developer.mozilla.org/en-US/Add-ons/SDK/Low-Level_APIs/ui_frame

或

如何在xul中使用下面的节点js代码：

var { Frame } = require("sdk/ui/frame");
var frame = new Frame({
  url: "./city-info.html"
});

在 node.js 中，它工作正常，但我不知道如何使用 xul 创建相同的东西。有人可以帮忙吗？

提前致谢。

【问题讨论】：

可能的答案太多，或者对于这种格式来说，好的答案太长了。请edit该问题添加详细信息以缩小答案集或隔离可以在几段中回答的问题。
另外，这是一个没有minimal reproducible example 的调试问题。无论哪种方式，请edit这个问题，以便可以回答。
感谢您的反馈 Makyen。但我的问题很简单。我只想使用基于 xul 的 firefox 插件在 Firefox 浏览器上显示一个框架。在那个框架中，我想打开一个 url。我也给出了示例网址，以更好地理解视图。
那么，除了该页面中的示例之外，您还希望摆脱这个问题吗？
我已编辑问题并从节点 js 添加参考代码。现在好了吗？我认为您对 node js 和 xul 感到困惑。示例url属于node js，我想在xul中回答。

标签： firefox-addon-sdk xul

【解决方案1】：

关于你想要什么，你提供的细节很少。如果您只想创建一个可以加载 HTML 内容的 <iframe>，那么可以使用以下内容：

//The URL of the HTML you desire to load.
let chromeUrl = '[Some URL here]';
//Whatever element you want the iframe placed under.
let parentEl = document.getElementById('foo');

//* Overlay and bootstrap (from almost any context/scope):
Components.utils.import('resource://gre/modules/Services.jsm');//Services
let activeWindow = Services.wm.getMostRecentWindow('navigator:browser');
//*/
let mainDocument = activeWindow.document;

//Create the <iframe> use
//mainDocument for the XUL namespace.
let iframeEl;
if(options.useBrowser){
    iframeEl = mainDocument.createElement('browser');
} else {
    iframeEl = mainDocument.createElement('iframe');
}
iframeEl.id = id;
iframeEl.setAttribute('src',chromeUrl);
iframeEl.setAttribute("tooltip", "aHTMLTooltip");
iframeEl.setAttribute("autocompleteenabled", true);
iframeEl.setAttribute("autocompletepopup", "PopupAutoComplete");
iframeEl.setAttribute("disablehistory",true);
iframeEl.setAttribute('type', 'content');
parentEl.appendChild(iframeEl);

上面的代码取自my answer to Firefox SDK Add-on with a sidebar on both the right and left at the same time，它创建了侧边栏。创建这些侧边栏的一种选择是让它们包含<iframe>。

【讨论】：

【解决方案2】：

我终于得到了答案：

let chromeUrl = 'YOUR HTML PAGE URL';
                        Components.utils.import('resource://gre/modules/Services.jsm');//Services
                        let activeWindow = Services.wm.getMostRecentWindow('navigator:browser');
                        //*/
                        let mainDocument = activeWindow.document;

                        let iframeEl;
                        iframeEl = mainDocument.createElement('iframe');

                        iframeEl.id = "d";
                        iframeEl.setAttribute('src',chromeUrl);
                        iframeEl.setAttribute("tooltip", "aHTMLTooltip");
                        iframeEl.setAttribute("autocompleteenabled", true);
                        iframeEl.setAttribute("autocompletepopup", "PopupAutoComplete");
                        iframeEl.setAttribute("disablehistory",true);
                        iframeEl.setAttribute('type', 'content');
                        iframeEl.setAttribute('height', '32px');

                        window.document.documentElement.appendChild(iframeEl);

【讨论】：