Cómo agregar un evento de clic a un iframe con JQuery

Question

Tengo un iframe en una página, procedente de un tercero (un anuncio). Me gustaría lanzar un evento de clic cuando se haga clic en ese iframe (para registrar algunas estadísticas internas). Algo así como:

$('#iframe_id').click(function() { 
    //run function that records clicks 
}); 

..based en HTML de:

<iframe id="iframe_id" src="http://something.com"></iframe> 

Me parece que no puede conseguir cualquier variación de que esto funcione. ¿Pensamientos?

Answer 1

No hay 'onclick' caso de un iframe, pero se puede tratar de atrapar el evento click del documento en el iframe:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() { 
    alert("iframe clicked"); 
} 

EDITAR Aunque esto no resuelve su cruz problema con el sitio, para tu información jQuery se ha actualizado para jugar bien con iFrames:

$('#iframe_id').on('click', function(event) { }); 

actualización 1/2015 T El enlace a la explicación del iframe se ha eliminado porque ya no está disponible.

Nota El código anterior no funcionará si el iframe pertenece a un dominio diferente de la página de host. Aún puedes intentar usar hacks mencionados en los comentarios.

Answer 2

Pruebe con esto: iframeTracker jQuery Plugin, así:

jQuery(document).ready(function($){ 
    $('.iframe_wrap iframe').iframeTracker({ 
     blurCallback: function(){ 
      // Do something when iframe is clicked (like firing an XHR request) 
     } 
    }); 
}); 

Answer 3

Ninguna de las respuestas sugeridas trabajó para mí. He resuelto un caso similar de la siguiente manera:

<a href="http://my-target-url.com" id="iframe-wrapper"></a> 
<iframe id="iframe_id" src="http://something.com" allowtrancparency="yes" frameborder="o"></iframe> 

El css (posicionamiento del curso exacto debe cambiar de acuerdo a los requerimientos de aplicaciones):

#iframe-wrapper, iframe#iframe_id { 
    width: 162px; 
    border: none; 
    height: 21px; 
    position: absolute; 
    top: 3px; 
    left: 398px; 
} 
#alerts-wrapper { 
    z-index: 1000; 
} 

Por supuesto, ahora se puede coger cualquier caso en el iframe-wrapper.

Answer 4

Estaba tratando de encontrar una mejor respuesta que fuera más independiente, así que comencé a pensar en cómo JQuery realiza eventos y eventos personalizados. Como el clic (de JQuery) es cualquier evento, pensé que todo lo que tenía que hacer era desencadenar el evento dado que se había hecho clic en el contenido del iframe. Por lo tanto, este fue mi solución

$(document).ready(function() { 
    $("iframe").each(function() { 
     //Using closures to capture each one 
     var iframe = $(this); 
     iframe.on("load", function() { //Make sure it is fully loaded 
      iframe.contents().click(function (event) { 
       iframe.trigger("click"); 
      }); 
     }); 

     iframe.click(function() { 
      //Handle what you need it to do 
     }); 
    }); 
}); 

Answer 5

Esto puede ser interesante para PPL utilizando Primefaces (que utiliza CLEditor):

document.getElementById('form:somecontainer:editor') 
.getElementsByTagName('iframe')[0].contentWindow 
.document.onclick = function(){//do something} 

Yo, básicamente, acaba de tomar la respuesta de viajar individuo de la tecnología y ha cambiado la selección un poco ...;)

Answer 6

Puede usar este código para enlazar haga clic en un elemento que está en el iframe.

jQuery('.class_in_iframe',jQuery('[id="id_of_iframe"]')[0].contentWindow.document.body).on('click',function(){ \t 
 
\t console.log("triggered !!") 
 
});

Answer 7

ver esto:

var iframe = $('#your_iframe').contents(); 

iframe.find('your_clicable_item').click(function(event){ 
    console.log('work fine'); 
}); 

Answer 8

solución que funciona para mí:

var editorInstance = CKEDITOR.instances[this.editorId]; 

      editorInstance.on('focus', function(e) { 

       console.log("tadaaa"); 

      });