Question

I have a child iframe on the page with the id #editor_frame. Inside the iframe is a small jquery widget (not a jquery ui-widget from widget factory) which fires a simple ‘change’ event after some user interaction.

I’m trying to bind to that event from the parent page…

$('#editor_iframe').contents().find('#uielement').bind('change', function(){....});  

With no luck what so ever. After doing some hair pulling research, I guess that events in the iframe are bound to the jquery namespace inside the that window… If that is correct, how can I access the jquery namespace in the iframe window?

Any takers?

Answer 1

You can access the javascript in a child iframe from the parent in the following way:

document.getElementById('editor_iframe').contentWindow.yourfunction()

Likewise, since jquery is just a function, you can access the iframe jquery instance like this:

document.getElementById('editor_iframe').contentWindow.$(yourjquery)...