Question

我需要在我的firefox插件中使用javascript将html元素显示为弹出式面板的内容。

使用SDK显示弹出窗口是我正在寻找的但我不想使用SDK。

面板：

<popupset id="mainPopupSet">
    <panel id="htmlPanel" type="arrow">
        i want to use html elements like p,div,span, etc here.
    </panel>
</popupset>

javascript打开面板：

document.getElementById('htmlPanel').innerHTML = 'my custom contents';
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);

似乎允许一些元素，但行为不同！我还需要为面板内的元素设置CSS。

Answer 1

我想出了如何使用iframe

来做到这一点

改变了XUL如下：

<popupset id="mainPopupSet">
    <panel id="htmlPanel" type="arrow">
        <html:iframe id="htmlContainer"/>
    </panel>
</popupset>

并创建一个javascript函数来设置html内容：

function setupPanel(contents, width, height)
{
    var iframe = document.getElementById("htmlContainer");
    iframe.setAttribute("src","data:text/html;charset=utf-8," + escape(contents));
    iframe.width = width || 300; //default width=300
    iframe.height = height || 300; //default height=300
}

和用法：

setupPanel("<p>this is raw HTML.</p>");
document.getElementById('htmlPanel').openPopup(null, "before_start", 0, 0, false, false);

感谢您的提示。

Answer 2

动画可以将粘贴复制到暂存器以运行它。

var win = Services.wm.getMostRecentWindow('navigator:browser');
var panel = win.document.createElement('panel');
var props = {
    type: 'arrow',
    style: 'width:300px;height:100px;'
}
for (var p in props) {
    panel.setAttribute(p, props[p]);
}

win.document.querySelector('#mainPopupSet').appendChild(panel);

panel.addEventListener('popuphiding', function (e) {
    e.preventDefault();
    e.stopPropagation();
    //panel.removeEventListener('popuphiding', arguments.callee, false); //if dont have this then cant do hidepopup after animation as hiding will be prevented
    panel.addEventListener('transitionend', function () {
        //panel.hidePopup(); //just hide it, if want this then comment out line 19 also uncomment line 16
        panel.parentNode.removeChild(panel); //remove it from dom //if want this then comment out line 18
    }, false);
    panel.ownerDocument.getAnonymousNodes(panel)[0].setAttribute('style', 'transform:translate(0,-50px);opacity:0.9;transition: transform 0.2s ease-in, opacity 0.15s ease-in');
}, false);

panel.openPopup(null, 'overlap', 100, 100);

在其中显示html，执行createElementNS('html namespace i cant recall right now','iframe')然后将此src设置为您希望它显示的html

type:'arrow'这里很重要

Answer 3

由于这似乎是browser.xul的叠加，如果您的面板将显示静态内容或简单模板，您可以利用已经声明XHTML命名空间的事实。

<popupset id="mainPopupSet">
  <panel id="htmlPanel" type="arrow">
    <html:div id="htmlplaceholder">
      <html:p>Lorem ipsum</html:p>
      <html:p>foo <html:strong>bar</html:strong></html:p>
    </html:div>
  </panel>
</popupset>

Add-on SDK托管iframe内的html内容，或许您应该考虑更复杂的情况。

如何在不使用sdk的情况下将html显示为firefox面板

3 个答案: