How can I render HTML from an nsIXMLHttpRequest in a firefox addon?

Question

I'm sending a nsIXMLHttpRequest to a service that can return HTML content. I can display the raw HTML inside a multiline textbox, but I'd like to be able to display the rendered HTML in my addon (preferably inside a xul tabpanel).

Is there a control I could use to do this? The only things that seem to render HTML take their input from a URL, where I need it to come from a javascript variable somehow.

*Edit: Found the answer minutes after posting, sorry *

It's still a worthy question, even if you already found the answer. Having the answer on StackOverflow makes it easier to find for the next person who tries to search for the answer. — Tyler, Jan 20 '11 at 05:02

score 1 · Accepted Answer · edited Jan 20 '11 at 05:03

1

iframe.setAttribute("src", "data:text/html," + encodeURIComponent(xmlHttpRequest.responseText));

Means I can load it into an iframe where firefox will render it. Straight from Mozilla Developer Center.

edited Jan 20 '11 at 05:03

Tyler

21,762
11
61
90

answered Jan 20 '11 at 04:15

Pat L

538
2
7

score 0 · Answer 2 · edited May 23 '17 at 12:26

You actually don't need to use the interfaces as the JavaScript XMLHttpRequest implementation will work just fine:

There is an example here: https://developer.mozilla.org/En/Using_XMLHttpRequest#Example.3a_Asynchronous_request

var req = new XMLHttpRequest();
req.open('GET', 'http://www.mozilla.org/', true);
req.onreadystatechange = function (aEvt) {
    if (req.readyState == 4) {
        if(req.status == 200)

            dump(req.responseText);   // your HTML is in this variable

            // since the element is an HTML element, you can use HTML DOM methods
            document.getElementById("container").innerHTML = req.responseText;

        else
            dump("Error loading page\n");
        }
    };
req.send(null);


<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml"
    ...
    <tabbox>
        <tabs>
            <tab label="Mail"/>
            <tab label="News"/>
        </tabs>
        <tabpanels>
            <tabpanel id="mailtab">
                <checkbox label="Automatically check for mail"/>
            </tabpanel>
            <tabpanel id="newstab">

                <!-- HTML div container embedded in XUL -->
                <html:div id="container"></html:div>

            </tabpanel>
        </tabpanels>
    </tabbox>

Also, see this post as this is a repeated question: Ajax In Firefox Plugin

EDIT: I made some adjustments to further target your question about embedding HTML in a tabpanel. Assume you have an HTML DIV container in your XUL, which can be accomplished using the HTML namespace bound to the window element.

You can now use HTML DOM methods to inject your HTML into the XUL tabpanel.

Inserting HTML in XUL Interfaces: http://www.xul.fr/tutorial/html.html

It's specifically rendering the responseText as HTML that I'm interested in. — Pat L, Jan 20 '11 at 04:13

How can I render HTML from an nsIXMLHttpRequest in a firefox addon?

2 Answers2