Firefox Addon adding a div/iframe but unable to set the innerHTMl/src

Question

I am writing a Firefox addon that allows for annotating a webpage by adding a div/iframe element to the page. My addon code is able to put the div or the iframe in place, but it is unable to set the source of the iframe or the innerHTML of the div. Is there some security restriction that prevents me from setting the innerHTML of a div or the src of an iframe? Here is the code inside my addon.

    onPageLoad: function(aEvent) {
    var doc = aEvent.originalTarget;

    var q = "";
            q = getRequestParameter(doc.location.search,"q");
            if(debug) Firebug.Console.log("query string =" + q);
            if(q!="" && q!=undefined) { 
                //To Check for target type
                //Firebug.Console.log(aEvent.originalTarget.nodeName);

            var n = document.createElement("div");      
            n.style.position = "fixed";     
            n.style.padding ="10px";
            n.style.backgroundColor ="gray";
            n.style.bottom="0";
            n.style.zIndex = "99" ;
            n.style.width ="250px";
            n.style.height="320px";
            n.style.right="10px";
            n.style.overflow="visible";

            //gBrowser.contentDocument.body.appendChild(n);
            var i = document.createElement("iframe");
            i.style.height="300px";
            i.style.width="230px";
            i.style.zindex="999";
            i.id = "rowzSearchIFrame";      
            i.src="http://annotator.com?webpagequery="+q;
            i.name ="rowzSearchIFrame";
            n.appendChild(i);

            gBrowser.contentDocument.body.appendChild(n);
            //content.document.body.appendChild(n);     
            document.frames['rowzSearchIFrame'].location.href = 'http://annotator.com?webpagequery='+q;
            alert(document.frames['rowzSearchIFrame'].id);

            document.frames['rowzSearchIFrame'].location.href = 'http://annotator.com?webpagequery='+q;

            document.getElementById('rowzSearchIFrame').setAttribute('src','http://annotator.com?webpagequery='+q);
            content.document.getElementById('rowzSearchIFrame').setAttribute('src','http://annotator.com?webpagequery='+q);


            document.getElementById('rowzSearchIFrame').src = 'http://annotator.com?webpagequery='+q;
            content.document.getElementById('rowzSearchIFrame').src = 'http://annotator.com?webpagequery='+q;
}

My code is able to put the div and the iframe in place with all the right CSS but it cannot set the src of the iframe or the innerHTML of the iframe.

As you can see, I have tried all possible mechanisms of setting the iframe src. The script is just unable to do this. Please help!

Answer 1

Your onPageLoad has to be somewhere in overlay otherwise you would've not been able to use gBrowser. If that's the case your document.createElement won't work, since that's chrome window.

It might work with doc.createElement or gBrowser.contentDocument.createElement. I haven't tried but from what I can see you're trying to create element on one document and append it to another.

Adding an edit for sake of completing this answer. The changes made to the code as per this answer were as follows (Please compare with posted code to see the difference)

onPageLoad: function(aEvent) {
var doc = aEvent.originalTarget;

var q = "";
        q = getRequestParameter(doc.location.search,"q");
        if(debug) Firebug.Console.log("query string =" + q);
        if(q!="" && q!=undefined) { 
            //To Check for target type
            //Firebug.Console.log(aEvent.originalTarget.nodeName);

        var n = doc.createElement("div");      
        n.style.position = "fixed";     
        n.style.padding ="10px";
        n.style.backgroundColor ="gray";
        n.style.bottom="0";
        n.style.zIndex = "99" ;
        n.style.width ="250px";
        n.style.height="320px";
        n.style.right="10px";
        n.style.overflow="visible";

        doc.body.appendChild(n);

        var i = document.createElement("iframe");
        i.style.height="300px";
        i.style.width="230px";
        i.style.zindex="999";
        i.id = "rowzSearchIFrame";      
        i.src="http://annotator.com?webpagequery="+q;
        i.name ="rowzSearchIFrame";
        n.appendChild(i);

        gBrowser.contentDocument.body.appendChild(n);
        //content.document.body.appendChild(n);     
        document.frames['rowzSearchIFrame'].location.href = 'http://annotator.com?webpagequery='+q;
        alert(document.frames['rowzSearchIFrame'].id);

        document.frames['rowzSearchIFrame'].location.href = 'http://annotator.com?webpagequery='+q;

        document.getElementById('rowzSearchIFrame').setAttribute('src','http://annotator.com?webpagequery='+q);
        content.document.getElementById('rowzSearchIFrame').setAttribute('src','http://annotator.com?webpagequery='+q);


        document.getElementById('rowzSearchIFrame').src = 'http://annotator.com?webpagequery='+q;
        content.document.getElementById('rowzSearchIFrame').src = 'http://annotator.com?webpagequery='+q;
}