Firebug and jQuery selectors in an iFrame

Question

I'm working on a web application and using the jQuery plug-in Colorbox to pop up a window that presents a form for editing elements of the parent window. I'm using Firebug to debug my Javascript and jQuery, and I noticed that I can't select an element in my Colorbox HTML form using the jQuery console command line. For instance:

$date = $("#date");

returns nothing when run from the jQuery console command line, even though I have an input element with id="date" and the Firebug "element inspect" pointer can find the element in the iFrame. Is there a way to get Firebug's console to access the elements in an iFrame?

Thanks for your help! Doug

Answer 1

You're looking for the cd method, documented here: http://getfirebug.com/wiki/index.php/Command_Line_API

Here's a bookmarklet I use to automate jumping into the iframe for any iframed Facebook application. It should provide enough of an example to modify for your use.

javascript:with(_FirebugCommandLine){cd($$(".canvas_iframe_util")[0].contentWindow)}

Note that with is generally bad practice, but this is literally how Firebug executes what you type into the console, so I mimicked that.

After you've run this, everything you type into the command line executes in the context of the iframe.

Answer 2

You need to pass iframe's document as a context for your selector, because iframe has its own separated DOM tree:

$('#date', $('iframe').get(0).contentDocument);

In order to get access in iframe's content, it must be loaded from same domain as parent document.

---

Just to elaborate here, .contentDocument property works in Chrome (and FF) but not in IE<8. You have to use .document.