CODEWITHSUNDEEP
javascriptfirefoxxulfirefox-addon
luisgo
luisgo

Reputation: 2465

Accessing an iFrame's dom from a Firefox Extension

I've spent a long time trying different things to get this to work but nothing does and documentation is not helping much.

I'm trying to populate a form inside an iframe that I dynamically inject into a page. To inject that iframe I do:

myObject.iframe = document.createElement("iframe");
myObject.iframe.setAttribute("src", data.url);
myObject.iframe.setAttribute("id","extension-iframe");
myObject.window.document.getElementById('publisher').appendChild(myObject.iframe);
myObject.iframe.addEventListener("load", function(){
    myObject.populate(data);
}, false);

which works fine and DOES trigger the populate() method. My problem is getting the document or window objects for that iframe. I've tried all of the following:

myObject.iframe.window
myObject.iframe.document
myObject.iframe.content

but these are all undefined.

I also tried passing the event object to that iframe's load event listener and then doing:

event.originalTarget

But that didn't work either.

I am reading the following documentation:

But either I'm not understanding it or it's just not properly explained.

Can anyone shed some light?

Thanks!

Upvotes: 3

Views: 5335

Answers (4)

Lukasz S
Lukasz S

Reputation: 668

I'm passing in the event object and then event.originalTarget (like you mentioned) and it's working fine. Although I had to set useCapture parameter of addEventListener to true in order to get my event called.

So if I understand correctly you need to access document in populate method...

I would pass event.originalTarget as a parameter to your method or in load event I would set for example myObject.document property and then use it in populate method.

myObject.iframe.addEventListener("load", function(event){
    var doc = event.originalTarget;
    myObject.populate(data,doc);
}, false);

Upvotes: 1

Ivan
Ivan

Reputation: 1561

Try myObject.iframe.contentDocument

Something along the lines of this:

// For accessing browser window from sidebar code.
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                   .getInterface(Components.interfaces.nsIWebNavigation)
                   .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
                   .rootTreeItem
                   .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
                   .getInterface(Components.interfaces.nsIDOMWindow);

var gBrowser = mainWindow.gBrowser;

var iframes = gBrowser.contentDocument.getElementsByTagName("iframe");
            for (var i=0; i < iframes.length; i++) {
                var check_elem = iframes[i].contentDocument.getElementById('myid');
                if (check_elem) {
                    ...;
                }
            }

Upvotes: 1

Thariama
Thariama

Reputation: 50832

I almost had the same problem. Using the following code gets me the iframe (Firebug is used for debugging):

iframes = window.content.document.getElementsByTagName('iframe')
for (var i = 0; i < iframes.length; i++) {
  var elmInput = iframes[i];
  Firebug.Console.log(elmInput);
}

Upvotes: 0

Sam C
Sam C

Reputation: 729

Have you tried using the contentWindow property?

var doc = iframe.contentWindow.document;

Upvotes: 3

Related Questions