Firebug and jQuery selectors in an iFrame

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 ha开发者_高级运维ve 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

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.

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.