capture Haga clic en div que rodea un iframe

Question

¿Cómo puedo capturar un evento de clic o mousedown en un div que rodea un iframe? He intentado adjuntar la función para hacer clic en el evento en el div pero, como el iframe nunca hace burbujas en el evento hasta el div circundante, nunca se llama a la función. ¿Hay alguna manera de capturar el evento en el div y luego propagarlo al iframe para la acción predeterminada

Answer 1

Si el clic está en el área iframe, el contexto del iframe maneja el evento click, no burbujea hasta el iframe padre. Por lo tanto, el div nunca registrará el evento click en absoluto si sucedió en el área iframe.

Además, si el iframe contiene una página que no pertenece al mismo dominio que el elemento principal iframe, se prohíbe cualquier interacción (ref. same origin policy).

cuando se cumple la same origin policy, hay algunas cosas que puede hacer, se puede llamar a un método en el contexto iframe padres:

top.parentFunction(); 

Así, en el marco flotante se añade un detector de eventos que los delegados a la matriz de marco flotante (accesible con la referencia top.

eventos de reproducción sean mucho más complicado, así que estoy simplemente va a hacer referencia a Diego Perini's NWEvents library. creo que su sistema de eventos para ser uno de los mejores que hay y que es particular sobre interacción iframe.

Ciertamente no comenzaría a escribir su propio código para lograr esto, este puede ser fácilmente un proyecto de un año si quiere hacerlo correctamente y aun así será inferior al trabajo de Diego.

Answer 2

No hay una "buena" manera de hacerlo, pero si realmente necesita detectar un clic en un Iframe, puede hacerlo en los últimos navegadores.

<iframe src="http://mtw-ed.com/" id="iframe" style=""></iframe> 

<script type="text/javascript"> 
var inIframe = false; 
function checkClick() { 
    if (document.activeElement 
     && document.activeElement === document.getElementById("iframe")) { 
     if (inIframe == false) { 
      alert("iframe click"); 
      inIframe = true; 
     } 
    } else 
     inIframe = false; 
} 
setInterval(checkClick, 200); 
</script> 

Este script comprobará cada 200 ms si el usuario está en el iframe. Por supuesto, es posible que no hayan hecho clic en Iframe para llegar allí, pero me temo que esto es lo mejor que puedes hacer sin la solución de @Gerrissen.

Detectará el primer 'clic' solamente, a menos que vuelva a hacer clic. Solo funciona en navegadores realmente modernos.

Answer 3

Puede usar una biblioteca como porthole para pasar mensajes entre padres e iframe, incluso entre dominios. Usar esto no propagaría exactamente el evento (no podrá obtener el objeto del evento), pero puede crear su propio evento en forma de un mensaje simple y luego manejarlo en el elemento primario como un clic.

Here's their example

Sin embargo, he utilizado la respuesta de Brendon ya que es trabajos más simples para mi necesidad actual.