HTML5 - Mensaje posterior del iframe del navegador cruzado - comunicación entre padres

Question

Escribí un script de contenido que inyecta un iframe a cualquier sitio web (por lo tanto, dominio diferente).

Necesito el sitio web principal para enviar información al iframe del niño, sin embargo no pude encontrar la manera de hacerlo.

El código

var targetFrame = $('#myIframe')[0]; 
targetFrame.contentWindow.postMessage('the message', '*'); 

No funciona de alguna manera y me sale un error Cannot call method 'postMessage' of undefined. Pero luego, cuando probé el mismo código directamente en la consola de Chrome, funcionó.

No tuve problemas para enviar un postMessage desde el hijo al padre, pero solo necesito una forma para que el padre envíe mensajes al iframe del niño.

Answer 1

que he tenido éxito en el uso de la biblioteca siguiente:

http://easyxdm.net/wp/

que no requiere ningún flash/Silverlight, JavaScript. Y es compatible desde IE6.

Tomó un poco de tiempo para ponerlo en funcionamiento, pero una vez que todo estuvo funcionando sin problemas.

Tenga en cuenta que si el iFrame que está abriendo en el otro dominio utiliza un protocolo diferente (HTTP frente a HTTPS), el navegador lanzará una advertencia que impedirá la ejecución del script (a menos que el usuario diga que aceptará el riesgo). Si tiene acceso a ambos protocolos, puede ser conveniente alojar el contenido del iFrame tanto en HTTP como en HTTPS y cargar el script apropiado en consecuencia.

¡Buena suerte!

Answer 2

No necesita orientar a contentWindow. Prueba esto:

var targetFrame = $('#myIframe')[0]; 
targetFrame.postMessage('the message', '*'); 

Answer 3

Hace poco escribí código que hizo postMessage a un iframe y me encontré con un problema bastante similar en el que dijo contentWindow es undefined.

En mi caso, mi iframe aún no formaba parte del árbol DOM, era una variable creada por document.createElement('iframe').

Una vez que lo oculté (ancho y alto 0px, visibilidad oculta) en el cuerpo de la página, contentWindow ya no estaba indefinido y todo funcionó como se esperaba.

Encontré la página Mozilla Developer Network para postMessage extremadamente útil cuando estaba trabajando en mi proyecto.