Detectar clic en Iframe usando JavaScript

Solución:

Ciertamente esto es posible. Esto funciona en Chrome, Firefox e IE 11 (y probablemente en otros).

focus();
var listener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('iframe')) {
        // clicked
    }
    window.removeEventListener('blur', listener);
});

JSFiddle

---

Advertencia: esto solo detecta el primer clic. Según tengo entendido, eso es todo lo que quieres.

Basándome en la respuesta de Mohammed Radwan, se me ocurrió la siguiente solución de jQuery. Básicamente, lo que hace es realizar un seguimiento de lo que la gente de iFrame está rondando. Luego, si la ventana se vuelve borrosa, lo más probable es que el usuario haya hecho clic en el banner de iframe.

el iframe debe colocarse en un div con una identificación, para asegurarse de saber en qué iframe hizo clic el usuario:

<div class="banner" bannerid='yyy'>
    <iframe src="http://somedomain.com/whatever.html"></iframe>
<div>

asi que:

$(document).ready( function() {
    var overiFrame = -1;
    $('iframe').hover( function() {
        overiFrame = $(this).closest('.banner').attr('bannerid');
    }, function() {
        overiFrame = -1
    });

… esto mantiene overiFrame en -1 cuando no se desplaza ningún iFrames, o el ‘bannerid’ establecido en el div de envoltura cuando se desplaza un iframe. Todo lo que tiene que hacer es verificar si ‘overiFrame’ está configurado cuando la ventana se desenfoca, así: …

    $(window).blur( function() {
        if( overiFrame != -1 )
            $.post('log.php', {id:overiFrame}); /* example, do your stats here */
    });
});

Solución muy elegante con un inconveniente menor: si un usuario presiona ALT-F4 al pasar el mouse sobre un iFrame, lo registrará como un clic. Sin embargo, esto solo sucedió en FireFox, IE, Chrome y Safari no lo registraron.

¡Gracias de nuevo Mohammed, solución muy útil!

Esta es una pequeña solución que funciona en todos los navegadores, incluso IE8:

var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.tagName == 'IFRAME'){
        clearInterval(monitor);
        alert('clicked!');
    }
}, 100);

Puede probarlo aquí: http://jsfiddle.net/oqjgzsm0/

---

---

Utiliza Nuestro Buscador