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 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.