Detectar clic en Iframe usando JavaScript
Entiendo que no es posible saber qué está haciendo el usuario dentro de un iframedominio cruzado. Lo que me gustaría hacer es rastrear si el usuario hizo clic en el archivo iframe. Me imagino un escenario en el que hay un elemento invisible divencima iframey el divluego pasará el evento de clic al iframe.
¿Es posible algo como esto? Si es así, ¿cómo lo haría? Son iframesanuncios, por lo que no tengo control sobre las etiquetas que se utilizan.
Esto es ciertamente posible. Esto funciona en Chrome, Firefox e IE 11 (y probablemente en otros).
const message = document.getElementById("message");
// main document must be focused in order for window blur to fire when the iframe is interacted with.
// There's still an issue that if user interacts outside of the page and then click iframe first without clicking page, the following logic won't run. But since the OP is only concerned about first click this shouldn't be a problem.
window.focus()
window.addEventListener("blur", () => {
setTimeout(() => {
if (document.activeElement.tagName === "IFRAME") {
message.textContent = "clicked " + Date.now();
console.log("clicked");
}
});
}, { once: true });<div id="message"></div>
<iframe width="50%" height="300" src="//example.com"></iframe>Advertencia: esto solo detecta el primer clic. Según tengo entendido, eso es todo lo que quieres.
Esta es una pequeña solución que funciona en todos los navegadores, incluso en IE8:
var monitor = setInterval(function(){
var elem = document.activeElement;
if(elem && elem.tagName == 'IFRAME'){
clearInterval(monitor);
alert('clicked!');
}
}, 100);
Puedes probarlo aquí: http://jsfiddle.net/oqjgzsm0/
Basado en la respuesta de Mohammed Radwan, se me ocurrió la siguiente solución 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 signifique que el usuario hizo clic en el banner del 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>
entonces:
$(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 iFrame, o el 'bannerid' establecido en el div envolvente cuando se desplaza un iframe. Todo lo que tienes que hacer es comprobar si 'overiFrame' está configurado cuando la ventana se vuelve borrosa, así: ...
$(window).blur( function() {
if( overiFrame != -1 )
$.post('log.php', {id:overiFrame}); /* example, do your stats here */
});
});
Solución muy elegante con un pequeño inconveniente: si un usuario presiona ALT-F4 cuando pasa 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!
