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

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 como:

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

..basado en HTML de:

  

Parece que no puedo obtener ninguna variación de esto para que funcione. ¿Pensamientos?

No hay evento ‘onclick’ para un iframe, pero puede intentar 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 el problema cruzado, FYI jQuery se ha actualizado para que funcione bien con iFrames:

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

Actualización 1/2015 El enlace a la explicación 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.

Intenta usar 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) } }); }); 

Estaba tratando de encontrar una mejor respuesta que fuera más independiente, así que comencé a pensar en cómo JQuery hace 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, esta 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 }); }); }); 

Funciona solo si el marco contiene una página del mismo dominio (no infringe la política de origen similar)

Mira esto:

 var iframe = $('#your_iframe').contents(); iframe.find('your_clicable_item').click(function(event){ console.log('work fine'); }); 

Ninguna de las respuestas sugeridas funcionó para mí. Resolví un caso similar de la siguiente manera:

   

El CSS (por supuesto, el posicionamiento exacto debería cambiar de acuerdo con los requisitos de la aplicación):

 #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 puedes ver cualquier evento en el iframe-wrapper.

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

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

Puede simular un evento de enfoque / clic teniendo algo como lo siguiente. (adaptado del evento $ (window) .blur que afecta Iframe )

 $(window).blur(function () { // check focus if ($('iframe').is(':focus')) { console.log("iframe focused"); $(document.activeElement).trigger("focus");// Could trigger click event instead } else { console.log("iframe unfocused"); } }); //Test $('#iframe_id').on('focus', function(e){ console.log(e); console.log("hello im focused"); }) 

Esto puede ser interesante para ppl usando Primefaces (que usa CLEditor):

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

Básicamente tomé la respuesta de Traveling Tech Guy y cambié la selección un poco …;)

Solución que funciona para mí:

 var editorInstance = CKEDITOR.instances[this.editorId]; editorInstance.on('focus', function(e) { console.log("tadaaa"); });