Detectar Haga clic en Iframe usando JavaScript

128

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 iframe. Me imagino un escenario en el que hay un invisible divencima iframey divluego pasará el evento de clic al iframe.

¿Es posible algo así? Si es así, ¿cómo lo haría? El iframesson anuncios, así que no tengo control sobre las etiquetas que se utilizan.

javascript iframe ads dom-events click-tracking Russ Bradberry
fuente

44

Es posible y existe una solución de crossbrowser: stackoverflow.com/a/32138108/1064513

Dmitry Kochin el

39

¿Es posible algo así?

No. Todo lo que puede hacer es detectar que el mouse entra en el iframe, y potencialmente (aunque no de manera confiable) cuando vuelve a salir (es decir, tratando de resolver la diferencia entre el puntero que pasa sobre el anuncio en su camino a otro lugar en lugar de demorarse) en el anuncio).

Me imagino un escenario en el que hay un div invisible encima del iframe y el div pasará el evento click al iframe.

No, no hay forma de falsificar un evento de clic.

Al capturar el mousedown, evitará que el clic original llegue al iframe. Si pudiera determinar cuándo estaba a punto de presionar el botón del mouse, podría intentar quitar el div invisible del camino para que el clic pasara ... pero tampoco hay ningún evento que se dispare justo antes de un mousedown.

Podría intentar adivinar, por ejemplo, mirando para ver si el puntero se ha detenido, adivinando que podría estar a punto de hacer clic. Pero es totalmente poco confiable, y si fallas, te has perdido un clic.

bobince
fuente

44

Sí lo es. Y hay una solución de crossbrowser: stackoverflow.com/a/32138108/1064513

Dmitry Kochin

1

Revisé estos enlaces y creo que la respuesta es correcta. Solo puede detectar un clic dentro del iframe, pero no lo que se hizo clic.

user568021

Voto abajo, solo porque no es totalmente cierto. La mayor parte de lo que está diciendo es cierto, pero existen soluciones alternativas como es la respuesta más popular en este hilo.

newms87

154

Esto es ciertamente 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.

Paul Draper
fuente

1

@the_joric, es porque fue 4 años después de la pregunta, y la gente normalmente no pasa las primeras respuestas.

Paul Draper

3

También cabe destacar que si cambia las pestañas del navegador, activará el foco ();

Linnay

77

NO funciona en Firefox. JSFiddle contiene errores que ocultan esto: = en lugar de ===. Existe una solución de navegador cruzado (incluso en IE8): stackoverflow.com/a/32138108/1064513

Dmitry Kochin

8

¡El evento de desenfoque no se activa si el usuario no hace clic en el documento principal primero! Además, esto no es utilizable para detectar clics en múltiples iframes, ya que no hay ningún evento que se dispare cuando el foco cambia de un iframe a otro (el blurevento del iframe no se dispara).

Tomáš Kafka

1

por qué hay dependencia en focus ();

Prasad Shinde

107

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á planeando. Luego, si la ventana se vuelve borrosa, lo más probable es que el usuario haya hecho clic en el banner del iframe.

el iframe debe colocarse en un div con un id, 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 cierran los iFrames, o se establece el 'bannerid' en el div de envoltura cuando se flota un iframe. Todo lo que tiene que hacer es verificar 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 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!

Patricio
fuente

Tengo + 1-ed esta respuesta, aunque tiene los siguientes problemas: 1. Cuando hay varios iframes, haces clic en uno de ellos, luego inmediatamente en otro, no se detecta el segundo clic. 2. Los clics múltiples dentro de un iframe tampoco se cuentan. 3. No funciona correctamente en dispositivos móviles, porque no puede hacer un evento de "desplazamiento" con un dedo.

Sych

Utilizo el script anterior para detectar clics fuera de mi sitio. La mayoría de las redes publicitarias ahora sirven pancartas en marcos. Si hace clic en uno y luego rápidamente en otro antes de dejar el primer clic, técnicamente quiero saber el último clic que realmente dejó. Entonces, en mi caso, es un comportamiento deseado. También funciona bien al detectar clics en banners móviles. Por lo que el vuelo estacionario debe ser lanzado justo antes de que se ejecute el clic

Patrick

No funciona en caso de elementos svg en el contenido del iframe :( stackoverflow.com/questions/32589735/…

Serhiy

@Serhiy, eso es porque en realidad no estás saliendo de la página original al hacer clic en el iframe ...

patrick

66

Esta respuesta es la mejor de ellas, sin embargo, si desea recibir cada clic en el iframe, debe enfocarse una vez que el usuario ha hecho clic para monitorear más clics. Esto se debe agregar a la sección $ (ventana) .blur (): setTimeout(function(){ window.focus(); }, 0);. Ahora, el usuario hace clic, pone el foco en el iframe, el script retira ese foco y ahora puede monitorear más cambios de foco de futuros clics.

HelpingHand

89

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/

Dmitry Kochin
fuente

1

¿Qué sucede si tiene varios iframes y no conoce su identificación?

shankshera

1

¡Única solución confiable entre navegadores que también funciona en la última versión de FF! Muchas gracias. Merece más votos a favor

BrainOverflow

66

@shankshera Solo obtén elem.id, esa es tu identificación de iframe :). Ver jsfiddle.net/oqjgzsm0/219

Tomáš Kafka

1

Estoy usando esto para hacer un seguimiento de los clics en los botones de me gusta social. Pero debido a que 3/4 de los que estoy usando usan iframes, necesito rastrear los clics en varios iframes. He actualizado el violín para permitir eso: jsfiddle.net/oqjgzsm0/273 . Establece un nuevo intervalo que verifica si un clic está fuera del último iframe en el que se hizo clic. Luego restablece el intervalo original para verificar los clics nuevamente. No realiza un seguimiento de múltiples clics en el mismo iframe sin un clic fuera de él.

brouxhaha

14

Además del hecho de que usar un intervalo de bucle continuo a esa velocidad no es una muy buena idea, esto detectará falsos positivos si el usuario establece el foco en el iframe a través de la navegación de la tecla de tabulación

Kaiido

36

El siguiente código le mostrará si el usuario hace clic / pasa el mouse o sale del iframe: -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Detect IFrame Clicks</title>
<script type="text/javascript">
    $(document).ready(function() {
        var isOverIFrame = false;

        function processMouseOut() {
            log("IFrame mouse >> OUT << detected.");
            isOverIFrame = false;
            top.focus();
        }

        function processMouseOver() {
            log("IFrame mouse >> OVER << detected.");
            isOverIFrame = true;
        }

        function processIFrameClick() {
            if(isOverIFrame) {
                // replace with your function
                log("IFrame >> CLICK << detected. ");
            }
        }

        function log(message) {
            var console = document.getElementById("console");
            var text = console.value;
            text = text + message + "\n";
            console.value = text;
        }

        function attachOnloadEvent(func, obj) {
            if(typeof window.addEventListener != 'undefined') {
                window.addEventListener('load', func, false);
            } else if (typeof document.addEventListener != 'undefined') {
                document.addEventListener('load', func, false);
            } else if (typeof window.attachEvent != 'undefined') {
                window.attachEvent('onload', func);
            } else {
                if (typeof window.onload == 'function') {
                    var oldonload = onload;
                    window.onload = function() {
                        oldonload();
                        func();
                    };
                } else {
                    window.onload = func;
                }
            }
        }

        function init() {
            var element = document.getElementsByTagName("iframe");
            for (var i=0; i<element.length; i++) {
                element[i].onmouseover = processMouseOver;
                element[i].onmouseout = processMouseOut;
            }
            if (typeof window.attachEvent != 'undefined') {
                top.attachEvent('onblur', processIFrameClick);
            }
            else if (typeof window.addEventListener != 'undefined') {
                top.addEventListener('blur', processIFrameClick, false);
            }
        }

        attachOnloadEvent(init);
    });
</script>
</head>
<body>
<iframe src="www.google.com" width="100%" height="1300px"></iframe>
<br></br>
<br></br>
<form name="form" id="form" action=""><textarea name="console"
id="console" style="width: 100%; height: 300px;" cols="" rows=""></textarea>
<button name="clear" id="clear" type="reset">Clear</button>
</form>
</body>
</html>

Debe reemplazar el src en el iframe con su propio enlace. Espero que esto ayude. Saludos, Mo.

Mohammed Radwan
fuente

1

Basado en pruebas rápidas, el ejemplo dado (después de arreglar la URL) parece funcionar en IE 8, algo confiable en Chrome 14.0.835.186 m, pero no en Firefox 6.0.2.

Matthew Flaschen

Funciona bien para Chrome, pero no funciona para Firefox v62, porque cuando se hace clic en el evento de desenfoque iframe no se

produce

11

Acabo de encontrar esta solución ... Lo probé, me encantó ...

Funciona para iframes de dominio cruzado para escritorio y dispositivos móviles.

No sé si todavía es infalible

window.addEventListener('blur',function(){
      if(document.activeElement.id == 'CrossDomainiframeId'){
        //do something :-)
      }
});

Codificación feliz

Tony
fuente

2

Esta misma respuesta (quizás una versión ligeramente mejor) se publicó un año antes aquí en esta misma página: stackoverflow.com/a/23231136/470749

Ryan

5

Puede lograr esto utilizando el evento de desenfoque en el elemento de ventana.

Aquí hay un complemento jQuery para rastrear clics en iframes (activará una función de devolución de llamada personalizada cuando se haga clic en un iframe): https://github.com/finalclap/iframeTracker-jquery

Úselo así:

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

Vince
fuente

5

ver http://jsfiddle.net/Lcy797h2/ para ver mi solución de largo aliento que no funciona de manera confiable en IE

        $(window).on('blur',function(e) {    
            if($(this).data('mouseIn') != 'yes')return;
            $('iframe').filter(function(){
                return $(this).data('mouseIn') == 'yes';
            }).trigger('iframeclick');    
        });

        $(window).mouseenter(function(){
            $(this).data('mouseIn', 'yes');
        }).mouseleave(function(){
            $(this).data('mouseIn', 'no');
        });

        $('iframe').mouseenter(function(){
            $(this).data('mouseIn', 'yes');
            $(window).data('mouseIn', 'yes');
        }).mouseleave(function(){
            $(this).data('mouseIn', null);
        });

        $('iframe').on('iframeclick', function(){
            console.log('Clicked inside iframe');
            $('#result').text('Clicked inside iframe'); 
        });
        $(window).on('click', function(){
            console.log('Clicked inside window');
            $('#result').text('Clicked inside window'); 
        }).blur(function(){
            console.log('window blur');
        });

        $('<input type="text" style="position:absolute;opacity:0;height:0px;width:0px;"/>').appendTo(document.body).blur(function(){
                $(window).trigger('blur');
            }).focus();

DiverseAndRemote.com
fuente

Su increíble hombre de codificación ... lo que realmente quiero ... + 1 a @Omar Jackman ... muy útil para capturar, haga clic en el anuncio de YouTube

saun4frsh

4

Esto funciona para mí en todos los navegadores (incluido Firefox)

https://gist.github.com/jaydson/1780598

https://jsfiddle.net/sidanmor/v6m9exsw/

var myConfObj = {
  iframeMouseOver : false
}
window.addEventListener('blur',function(){
  if(myConfObj.iframeMouseOver){
    console.log('Wow! Iframe Click!');
  }
});

document.getElementById('idanmorblog').addEventListener('mouseover',function(){
   myConfObj.iframeMouseOver = true;
});
document.getElementById('idanmorblog').addEventListener('mouseout',function(){
    myConfObj.iframeMouseOver = false;
});

<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

Expandir fragmento

<iframe id="idanmorblog" src="https://sidanmor.com/" style="width:400px;height:600px" ></iframe>

sidanmor
fuente

3

Mohammed Radwan, su solución es elegante. Para detectar clics de iframe en Firefox e IE, puede usar un método simple con document.activeElement y un temporizador, sin embargo ... He buscado en todas las interwebs un método para detectar clics en un iframe en Chrome y Safari. A punto de rendirme, encuentro tu respuesta. ¡Gracias Señor!

Algunos consejos: He encontrado que su solución es más confiable al llamar a la función init () directamente, en lugar de mediante attachOnloadEvent (). Por supuesto, para hacer eso, debe llamar a init () solo después del iframe html. Entonces se vería algo así como:

<script>
var isOverIFrame = false;
function processMouseOut() {
    isOverIFrame = false;
    top.focus();
}
function processMouseOver() { isOverIFrame = true; }
function processIFrameClick() {
    if(isOverIFrame) {
    //was clicked
    }
}

function init() {
    var element = document.getElementsByTagName("iframe");
    for (var i=0; i<element.length; i++) {
        element[i].onmouseover = processMouseOver;
        element[i].onmouseout = processMouseOut;
    }
    if (typeof window.attachEvent != 'undefined') {
        top.attachEvent('onblur', processIFrameClick);
    }
    else if (typeof window.addEventListener != 'undefined') {
        top.addEventListener('blur', processIFrameClick, false);
    }
}
</script>

<iframe src="http://google.com"></iframe>

<script>init();</script>

zone117x
fuente

3

Puede hacer esto para burbujear eventos en el documento principal:

$('iframe').load(function() {
    var eventlist = 'click dblclick \
                    blur focus focusin focusout \
                    keydown keypress keyup \
                    mousedown mouseenter mouseleave mousemove mouseover mouseout mouseup mousemove \
                    touchstart touchend touchcancel touchleave touchmove';

    var iframe = $('iframe').contents().find('html');

    // Bubble events to parent
    iframe.on(eventlist, function(event) {
        $('html').trigger(event);
    });
});

Simplemente extienda la lista de eventos para más eventos.

Taner Topal
fuente

¡Usé el evento 'touchend' y funcionó! ¡Tu respuesta me ayudó mucho!

3

Me encontré con una situación en la que tenía que rastrear los clics en un botón de redes sociales que se activaba a través de un iframe. Se abriría una nueva ventana al hacer clic en el botón. Aquí estaba mi solución:

var iframeClick = function () {
    var isOverIframe = false,
    windowLostBlur = function () {
        if (isOverIframe === true) {
            // DO STUFF
            isOverIframe = false;
        }
    };
    jQuery(window).focus();
    jQuery('#iframe').mouseenter(function(){
        isOverIframe = true;
        console.log(isOverIframe);
    });
    jQuery('#iframe').mouseleave(function(){
        isOverIframe = false;
        console.log(isOverIframe);
    });
    jQuery(window).blur(function () {
        windowLostBlur();
    });
};
iframeClick();

pizzarob
fuente

3

http://jsfiddle.net/QcAee/406/

¡Simplemente haga una capa invisible sobre el iframe que retroceda cuando haga clic y suba cuando se dispare el evento mouseleave!
Necesita jQuery

¡esta solución no propaga el primer clic dentro del iframe!

$("#invisible_layer").on("click",function(){
		alert("click");
		$("#invisible_layer").css("z-index",-11);

});
$("iframe").on("mouseleave",function(){
		$("#invisible_layer").css("z-index",11);
});

iframe {
    width: 500px;
    height: 300px;
}
#invisible_layer{
  position: absolute;
  background-color:trasparent;
  width: 500px;
  height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="message"></div>
<div id="invisible_layer">

</div>
<iframe id="iframe" src="//example.com"></iframe>

Expandir fragmento

r1si
fuente

1

Esto definitivamente funciona si el iframe es del mismo dominio que su sitio principal. No lo he probado para sitios entre dominios.

$(window.frames['YouriFrameId']).click(function(event){  /* do something here  */ });
$(window.frames['YouriFrameId']).mousedown(function(event){ /* do something here */ });
$(window.frames['YouriFrameId']).mouseup(function(event){ /* do something here */ });

Sin jQuery, podría intentar algo como esto, pero nuevamente no lo he intentado.

window.frames['YouriFrameId'].onmousedown = function() { do something here }

Incluso puedes filtrar tus resultados:

$(window.frames['YouriFrameId']).mousedown(function(event){   
  var eventId = $(event.target).attr('id');      
  if (eventId == 'the-id-you-want') {
   //  do something
  }
});

Jonathan Tonge
fuente

1

Combinando la respuesta anterior con la capacidad de hacer clic una y otra vez sin hacer clic fuera del iframe.

    var eventListener = window.addEventListener('blur', function() {
    if (document.activeElement === document.getElementById('contentIFrame')) {
        toFunction(); //function you want to call on click
        setTimeout(function(){ window.focus(); }, 0);
    }
    window.removeEventListener('blur', eventListener );
    });

Talha Asif
fuente

1

Podemos atrapar todos los clics. La idea es restablecer el foco en un elemento fuera del iFrame después de cada clic:

    <input type="text" style="position:fixed;top:-1000px;left:-1000px">
    <div id="message"></div>
    <iframe id="iframe" src="//example.com"></iframe>
    <script>
        focus();
        addEventListener('blur', function() {
            if(document.activeElement = document.getElementById('iframe')) {
                message.innerHTML += 'Clicked';
                setTimeout(function () {
                    document.querySelector("input").focus();
                    message.innerHTML += ' - Reset focus,';
                }, 1000);
            }  
        });
    </script>

JSFiddle

Alexandre Muraviov
fuente

0

Creo que puedes hacer algo como:

$('iframe').contents().click(function(){function to record click here });

usando jQuery para lograr esto.

Daniel Sellers
fuente

0

Como se encuentra allí: Detectar Haga clic en Iframe usando JavaScript

=> Podemos usar iframeTracker-jquery :

$('.carousel-inner .item').each(function(e) {
    var item = this;
    var iFrame = $(item).find('iframe');
    if (iFrame.length > 0) {
        iFrame.iframeTracker({
            blurCallback: function(){
                // Do something when iFrame is clicked (like firing an XHR request)
                onItemClick.bind(item)(); // calling regular click with right context
                console.log('IFrameClick => OK');
            }
        });
        console.log('IFrameTrackingRegistred => OK');
    }
})

Mickaël
fuente

0

Basado en la respuesta de Paul Draper, creé una solución que funciona continuamente cuando tienes Iframes que abren otra pestaña en el navegador. Cuando regresa la página, continúe activo para detectar el clic sobre el marco, esta es una situación muy común:

          focus();
        $(window).blur(() => {
           let frame = document.activeElement;
           if (document.activeElement.tagName == "IFRAME") {
             // Do you action.. here  frame has the iframe clicked
              let frameid = frame.getAttribute('id')
              let frameurl = (frame.getAttribute('src'));
           }            
        });

        document.addEventListener("visibilitychange", function () {
            if (document.hidden) {

            } else {
                focus();
            }
        });

El Código es simple, el evento de desenfoque detecta la pérdida de foco cuando se hace clic en el iframe y prueba si el elemento activo es el iframe (si tiene varios iframe puede saber quién fue seleccionado) esta situación es frecuente cuando tiene marcos publicitarios .

El segundo evento activa un método de enfoque cuando regresa a la página. Se utiliza el evento de cambio de visibilidad.

desarrollador libre
fuente

0

Aquí hay una solución que utiliza enfoques sugeridos con hover + blur y trucos de elementos activos, no ninguna biblioteca, solo js puro. Funciona bien para FF / Chrome. En su mayoría, el enfoque es el mismo que propuso @Mohammed Radwan, excepto que uso un método diferente propuesto por @ zone117x para rastrear el clic del iframe para FF, porque window.focus no funciona sin configuraciones de usuario adicionales :

Hace una solicitud para traer la ventana al frente. Puede fallar debido a la configuración del usuario y no se garantiza que la ventana esté en primer plano antes de que regrese este método.

Aquí está el método compuesto:

function () {
    const state = {};

    (function (setup) {
        if (typeof window.addEventListener !== 'undefined') {
            window.addEventListener('load', setup, false);
        } else if (typeof document.addEventListener !== 'undefined') {
            document.addEventListener('load', setup, false);
        } else if (typeof window.attachEvent !== 'undefined') {
            window.attachEvent('onload', setup);
        } else {
            if (typeof window.onload === 'function') {
                const oldonload = onload;
                window.onload = function () {
                    oldonload();
                    setup();
                };
            } else {
                window.onload = setup;
            }
        }
    })(function () {
        state.isOverIFrame = false;
        state.firstBlur = false;
        state.hasFocusAcquired = false;

        findIFramesAndBindListeners();

        document.body.addEventListener('click', onClick);

        if (typeof window.attachEvent !== 'undefined') {
            top.attachEvent('onblur', function () {
                state.firstBlur = true;
                state.hasFocusAcquired = false;
                onIFrameClick()
            });
            top.attachEvent('onfocus', function () {
                state.hasFocusAcquired = true;
                console.log('attachEvent.focus');
            });
        } else if (typeof window.addEventListener !== 'undefined') {
            top.addEventListener('blur', function () {
                state.firstBlur = true;
                state.hasFocusAcquired = false;
                onIFrameClick();
            }, false);
            top.addEventListener('focus', function () {
                state.hasFocusAcquired = true;
                console.log('addEventListener.focus');
            });
        }

        setInterval(findIFramesAndBindListeners, 500);
    });

    function isFF() {
        return navigator.userAgent.search(/firefox/i) !== -1;
    }

    function isActiveElementChanged() {
        const prevActiveTag = document.activeElement.tagName.toUpperCase();
        document.activeElement.blur();
        const currActiveTag = document.activeElement.tagName.toUpperCase();
        return !prevActiveTag.includes('BODY') && currActiveTag.includes('BODY');
    }

    function onMouseOut() {
        if (!state.firstBlur && isFF() && isActiveElementChanged()) {
            console.log('firefox first click');
            onClick();
        } else {
            document.activeElement.blur();
            top.focus();
        }
        state.isOverIFrame = false;
        console.log(`onMouseOut`);
    }

    function onMouseOver() {
        state.isOverIFrame = true;
        console.log(`onMouseOver`);
    }

    function onIFrameClick() {
        console.log(`onIFrameClick`);
        if (state.isOverIFrame) {
            onClick();
        }
    }

    function onClick() {
        console.log(`onClick`);
    }

    function findIFramesAndBindListeners() {
        return Array.from(document.getElementsByTagName('iframe'))
            .forEach(function (element) {
                element.onmouseover = onMouseOver;
                element.onmouseout = onMouseOut;
            });
    }
}

carne
fuente

0

supuestos -

Su secuencia de comandos se ejecuta fuera del iframe PERO NO en la ventana más externa window.top. (Para la ventana más externa, otras soluciones de desenfoque son lo suficientemente buenas)
Se abre una nueva página reemplazando la página actual / una nueva página en una nueva pestaña y el control se cambia a una nueva pestaña.

Esto funciona tanto para iframes fuente como sin fuente

var ifr = document.getElementById("my-iframe");
var isMouseIn;
ifr.addEventListener('mouseenter', () => {
    isMouseIn = true;
});
ifr.addEventListener('mouseleave', () => {
    isMouseIn = false;
});
window.document.addEventListener("visibilitychange", () => {
    if (isMouseIn && document.hidden) {
        console.log("Click Recorded By Visibility Change");
    }
});
window.addEventListener("beforeunload", (event) => {
    if (isMouseIn) {
        console.log("Click Recorded By Before Unload");
    }
});

Si se abre una nueva pestaña / se descarga la misma página y el puntero del mouse está dentro del Iframe, se considera un clic

Sahil Maniar
fuente

Detectar Haga clic en Iframe usando JavaScript

Respuestas: