Detectar clic en Iframe usando JavaScript

javascript-events advertising

Question

Entiendo que no es posible decir qué hace el usuario dentro de un iframe si es de dominio cruzado. Lo que me gustaría hacer es rastrear si el usuario hizo clic en todo en el iframe . Me imagino un escenario donde hay un div invisible sobre el iframe y el div pasará el evento click al iframe .

Es algo como esto posible? Si es así, ¿cómo lo haré? Los iframes son anuncios, por lo que no tengo control sobre las etiquetas que se usan.

Answer 1

Es algo como esto posible?

No. Todo lo que puede hacer es detectar el mouse yendo al iframe, y potencialmente (aunque no confiablemente) cuando vuelve a aparecer (es decir, tratando de encontrar la diferencia entre el puntero que pasa sobre el anuncio en su camino a otro lado o persistente en el anuncio).

Me imagino un escenario donde hay un div invisible sobre el iframe y el div pasará el evento click al iframe.

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

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

Podría tratar de adivinar, por ejemplo, mirando para ver si el puntero se detuvo, adivinando que un clic podría estar por venir. Pero es totalmente inestable, y si fallas, acabas de perder un clic.

Answer 2

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

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

No sé si es infalible aún

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

Feliz codificación

Answer 3

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 las personas que iFrame están rondando. Luego, si la ventana se borra, lo más probable es que el usuario haga clic en el banner 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 hay iFrames flotando, o el ''bannerid'' establecido en el div de envoltura cuando se sitúa 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 inconveniente menor: si un usuario presiona ALT-F4 al pasar el mouse sobre un iFrame, lo registrará como un clic. Esto solo sucedió en Firefox, IE, Chrome y Safari no lo registraron.

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

Answer 4

Como se encuentra allí: detectar 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'');
    }
})

Answer 5

Creo que puedes hacer algo como:

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

usando jQuery para lograr esto.

Answer 6

El siguiente código le mostrará si el usuario hace clic / se desplaza o se mueve fuera 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>

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

Answer 7

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);

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

Answer 8

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

$(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ías probar algo como esto, pero de nuevo 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
  }
});

Answer 9

Esto es ciertamente posible. Esto funciona en Chrome, Firefox e IE 11 (y probablemente 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 entiendo, eso es todo lo que quieres.

Answer 10

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>

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

Answer 11

Me encontré con una situación en la que tuve que hacer un seguimiento de los clics en un botón de redes sociales atravesado por un iframe. Se abrirá una nueva ventana cuando se haga 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();

Answer 12

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

Algunos consejos: he encontrado que su solución es más confiable cuando se llama a la función init () directamente, en lugar de a través de 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>

Answer 13

Puede hacer esto para pasar eventos de burbuja al 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.

Answer 14

Puede lograr esto utilizando el evento blur en el elemento window.

Aquí hay un complemento de jQuery para el seguimiento, haga clic 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)
        }
    });
});

Answer 15

ver http://jsfiddle.net/Lcy797h2/ para 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();

Answer 16

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

¡Simplemente crea una capa invisible sobre el iframe que retrocede cuando haces clic y sube cuando se activará el evento mouseleave!
Necesito jQuery

esta solución no se propaga primer clic dentro de 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>