13

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

writes_on
  • 1,735
  • 2
  • 22
  • 35
  • can you clarify, does the script work normally when part of the page, but not when run through the console? – KP. Mar 22 '10 at 20:06
  • did you try `var date = $("#date");` – ant Mar 22 '10 at 20:18
  • 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 Mar 24 '10 at 12:52

2 Answers2

21

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.

bcherry
  • 7,150
  • 2
  • 28
  • 37
  • 3
    This is genius. Thank you for sharing that snippet. It makes Facebook iframe app development much easier. – Johnny Oshika Jul 25 '10 at 22:34
  • 4
    To clarify, if you're in the Firebug console all you need is the cd(iframedom.contentWindow) – James Baker Aug 26 '10 at 17:34
  • 1
    In case it's helpful: I'm finding that I need .window instead of .contentWindow -- for some frames, not all. Thankfully, iframes are rare enough that I can't find very many to test. – Whatcould Jan 11 '11 at 15:24
  • Made this question a favorite, because bcherry and James Baker. (And I add this comment only to remind me of looking directly at James Bakers solution, the next time I need it.) – SwissCoder Nov 20 '12 at 10:25
15

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.

Aliostad
  • 80,612
  • 21
  • 160
  • 208
jholster
  • 5,066
  • 1
  • 27
  • 20
  • Yaggo, Thanks for your reply, can you elaborate a little more? I'm not "getting" what you mean by accessing the iFrame's context. Thanks, Doug – writes_on Mar 24 '10 at 12:53
  • just to elaborate here, `.contentDocument` property works in Chrome (and FF) but not in IE. You have to use `.document`. – Aliostad Dec 07 '11 at 09:36