Define an event on iFrame element with jQuery

Question

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

Answer 1

you can fire event innner like this:

parent.$('#dlg').trigger('onTitle');

then hold event like this:

$('#dlg').bind('onTitle', function(){ alert(); });

Answer 2

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 3

this worked for me. NB: make sure you have referenced jquery library on the iframe page as well.

$(document).ready(function(){
    $('#iframeid').load(function(){ //make sure that all elements finish loading
            $('#iframeid').contents().find('img').live({
                 click: function(){
                    alert('clicked img');
                 }
            });
        });
    });

Answer 4

 $("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 5

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.

Answer 6

jQuery.bind() won't work with external documents. At least in jQuery 1.6.2.

However you can bind to DOM events:

$("iframe").contents().find("img").onclick = function() { // do your staff here };

If you do not have full list of images at the moment, you can use events propogation:

$("iframe").contents().find("body").onclick = function() { // do your staff here };

It will work event with custom events:

$("iframe").contents().find("body").onmyevent = function() { // do your staff here };

One more thing to remember... frame content is loaded asynchronously. So bind your handlers AFTER your iframe content is loaded:

var $iframe = $("iframe"); 
$iframe.bind("load", null, funcion(e) {
    $iframe.contents().find("body").onclick = function() { // do your staff here }; 
});

For more complicated cases handle your images clicks inside iframe, and trigger your custom events that you can later handle on the body level. Especially if you have totally dynamic content and want to bind to 'live' events inside iframe.