blocks|key|3085575|text|用动画可以复制粘贴到便签簿来运行它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3085576|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);|code-block|syntax|javascript|3085577|要在其中显示html，请执行createElementNS('html+namespace+i+cant+recall+right+now','iframe')操作，然后将此的src设置为您希望它显示的html|offset|length|style|CODE|3085578|这里的type:'arrow'很重要|3085579|entityMap^0|0|0|E|1U|0|3|C|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@$I|W|J|X|K|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

With animation can copy paste to scratchpad to run it.

<pre><code>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);
</code></pre>

to display html in it, do <code>createElementNS('html namespace i cant recall right now','iframe')</code> then set the src of this to the html you want it to display

the <code>type:'arrow'</code> here is important

blocks|key|2918391|text|由于这似乎是browser.xul的覆盖，因此如果您的面板将显示静态内容或简单的模板，那么您可以利用已经声明了XHTML名称空间这一事实。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2918392|<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>|code-block|syntax|javascript|2918393|Add-on+SDK在iframe中托管html内容，也许你应该在更复杂的情况下考虑这一点。|2918394|entityMap^0|6|B|0|0|B|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Since this appears to be an overlay of <code>browser.xul</code>, if your panel will display static content or a simple template, you can take advantage of the fact that the XHTML namespace is already declared.

<pre class="lang-xml prettyprint-override"><code>&lt;popupset id="mainPopupSet"&gt;
 &lt;panel id="htmlPanel" type="arrow"&gt;
 &lt;html:div id="htmlplaceholder"&gt;
 &lt;html:p&gt;Lorem ipsum&lt;/html:p&gt;
 &lt;html:p&gt;foo &lt;html:strong&gt;bar&lt;/html:strong&gt;&lt;/html:p&gt;
 &lt;/html:div&gt;
 &lt;/panel&gt;
&lt;/popupset&gt;
</code></pre>

The Add-on SDK hosts the html content inside an <code>iframe</code>, perhaps you should consider this for more complex cases.

blocks|key|3085653|text|我知道如何使用iframe来完成这项工作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3085654|按如下方式更改了XUL：|3085655|<popupset+id="mainPopupSet">
++++<panel+id="htmlPanel"+type="arrow">
++++++++<html:iframe+id="htmlContainer"/>
++++</panel>
</popupset>+|code-block|syntax|javascript|3085656|并创建一个javascript函数来设置html内容：|3085657|function+setupPanel(contents,+width,+height)
{
++++var+iframe+=+document.getElementById("htmlContainer");
++++iframe.setAttribute("src","data:text/html;charset=utf-8,"+%2B+escape(contents));
++++iframe.width+=+width+%7C%7C+300;+//default+width=300
++++iframe.height+=+height+%7C%7C+300;+//default+height=300
}|3085658|和用法：|3085659|setupPanel("this+is+raw+HTML.");
document.getElementById('htmlPanel').openPopup(null,+"before_start",+0,+0,+false,+false);|3085660|谢谢你的提示。|3085661|entityMap^0|7|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|15|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|6|7|17|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|X|$]]

I figure it out how to do it using an <code>iframe</code>

changed the XUL as follow:

<pre><code>&lt;popupset id="mainPopupSet"&gt;
 &lt;panel id="htmlPanel" type="arrow"&gt;
 &lt;html:iframe id="htmlContainer"/&gt;
 &lt;/panel&gt;
&lt;/popupset&gt; 
</code></pre>

and create a javascript function to set html contents:

<pre><code>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
}
</code></pre>

and usage:

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

thanks for your hints.

I need to display html elements as contents of a popup panel using javascript in my firefox addon.

Displaying popup using SDK is what I'm looking for but I don't want to use SDK. 

panel:

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

javascript to open panel:

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

it seems some elements are allowed but with different behavior! i also need to set CSS for elements inside panel.

How to display html as firefox panel without using sdk

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要在我的firefox插件中使用javascript将html元素显示为弹出面板的内容。使用SDK显示弹出窗口是我想要的，但我不想使用SDK。面板：<popupset id="mainPopupSet"> <panel id="htmlPanel" type="arrow"> i want to...

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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