如何在不使用sdk的情况下将html显示为firefox面板
如何在不使用sdk的情况下将html显示为firefox面板
提问于 2014-09-02 16:11:35
我需要在我的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。
回答 3
Stack Overflow用户
发布于 2014-09-02 18:08:14
我知道如何使用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);谢谢你的提示。
Stack Overflow用户
发布于 2014-09-02 16:29:10
用动画可以复制粘贴到便签簿来运行它。
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'很重要
Stack Overflow用户
发布于 2014-09-02 17:37:00
由于这似乎是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内容，也许你应该在更复杂的情况下考虑这一点。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25618755
复制相关文章
相似问题
腾讯云开发者
