Define an event on iFrame element with jQuery

Question

Hi,

I try to define a live event on img tags store on a iFrame. For example, I would like obtain a simple javascript alert box when I click a image on my iFrame.

Do you know how i can define the events for the iFrame, because I would like to put a thing like $('img').live("click",function().... but only for the elements on iFrame.

Thanks for your help.

Nicolas

Answer 1

You can do it if you

1. make sure that the page in the iframe has its own copy of jQuery loaded [ed.: only really necessary for jQuery operations internal to the frame's page itself]
2. from the outer document, work into the iframe document like this:

$('#iframeId').contents().find('img') // ...

Answer 2

 $("iframe").contents().find("img")

This will target images within the iFrame. But be aware that jquery will only traverse the iFrame if it is not a violation of the browser's (or jquery's) cross-site policy.

That means if the iframe is google.com, you can't touch the inner DOM.

Answer 3

Thanks for your help.

I'm agree with you, but in my case, img tags are dynamically added on my iFrame after his loading. Do you know a means to manage events on tags generated after iFrame generation.

Thanks for your help

Answer 4

The other solutions here are largely myopic, as what you are trying to do is fairly complicated in the underlying javascript.

I'd suggest using jquery context as well - and I'd strongly suggest waiting for the iframe to totally load or else none of the previous suggestions could work anyway...

$("#frame").ready(function () { //wait for the frame to load

  $('img', frames['frame'].document).bind("click",function(){
   alert('I clicked this img!');
  });

});

This should generally work UNLESS you update the iframe or refresh it, in which case all the event bindings will fail... and worse yet the .live events don't appear to be supported in iframes - at least not for me.