Firebug and jQuery selectors in an iFrame

13
votes

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

2
jqueryiframefirebug
can you clarify, does the script work normally when part of the page, but not when run through the console? - KP.
did you try var date = $("#date"); - ant
The Javascript works in the Colorbox, it's just that I can't manipulate elements that are in the iFrame with jQuery in the Firebug console. - writes_on

2 Answers

21
votes

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.

15
votes

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.