Detectar clic en Iframe usando JavaScript
javascript-events advertising (16)
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.
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.
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
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!
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'');
}
})
Creo que puedes hacer algo como:
$(''iframe'').contents().click(function(){function to record click here });
usando jQuery para lograr esto.
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.
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/
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
}
});
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);
});
Advertencia: esto solo detecta el primer clic. Según entiendo, eso es todo lo que quieres.
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>
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();
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>
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.
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)
}
});
});
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();
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>