Adjuntar un evento en un iframe hijo a un controlador en la ventana primaria

Question

No tengo acceso directamente a la fuente de este iframe, por lo que me gustaría hacer esto, si es posible.

que tienen un iframe generado por JS:

<iframe name="temp_iframe" width="100%" height="95%" src="'+the_url+'"></iframe> 

En su interior, un botón de envío y un botón Cancelar. El botón de enviar funciona bien, pero quiero que el botón de cancelar cierre este modal que contiene el iframe ... También quiero enviar el botón de envío, y luego cerrar el modal. Normalmente, esto sería fácil, pero no estoy seguro de cómo configurar un evento en la ventana principal para un elemento DOM hijo del iframe que afecta al elemento principal del elemento secundario, la ventana principal.

E.g. si esto no fuera en un iframe y en jQuery:

$('[name=temp_iframe] button').live('click',function(){ 
    alert('click'); 
    return false; 
}); 

EDIT: Y también, está en el mismo dominio!

Answer 1

Utilice contents() para acceder al objeto Document dentro de un iframe. Tenga en cuenta que hay problemas generales con el uso de una biblioteca jQuery en un documento para manipular otro documento y, en general, debe evitarse. Sin embargo, en el caso de eventos vinculantes, funciona.

$('[name=temp_iframe]').contents().find('button').click(function() { 
    alert('click'); 
}); 

Esto requiere que el iframe y su contenido se cargan, por lo que hacer en un manejador $(window).load() si es necesario. No puede live/delegate entre documentos, ya que los eventos no se propagan desde un documento secundario a su elemento principal.

Answer 2

En la llanura JavaScript sería:

document.getElementById("frameId").contentDocument.getElementById("buttonId").click(); 

Si necesita elementos por valor de atributo y el nombre de la etiqueta de búsqueda, puede:

document.querySelectorAll('[name=temp_iframe]')[0].contentDocument.getElementsByTagName('button')[0].click();