Error al ejecutar ‘postMessage’ en ‘DOMWindow’: el origen de destino proporcionado no coincide con el origen de la ventana del destinatario (‘null’)

Tengo un juego en heroku, ahora estoy tratando de hacerlo funcionar en el lienzo de Facebook, pero, aunque funciona en Firefox, en Chrome e IE no funciona.

IE muestra una advertencia con un botón, al hacer clic en el botón, muestra el contenido.

En Chrome, me sale este error:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://game.herokuapp.com') does not match the recipient window's origin ('null').

¿Qué ocurre?

Asegúrese de que la ventana de destino en la que usted (o Facebook) está publicando un mensaje haya terminado de cargarse. La mayoría de las veces que recibí este error fue cuando un iframe al que estaba enviando mensajes no se pudo cargar.

Otra razón por la que esto podría estar sucediendo es si está utilizando un iframe que tiene el atributo sandbox y allow-same-origin no está configurado, por ejemplo:

// page.html
<iframe id="f" src="http://localhost:8000/iframe.html" sandbox="allow-scripts"></iframe>
<script type="text/javascript">
    var f = document.getElementById("f").contentWindow;
    // will throw exception
    f.postMessage("hello world!", 'http://localhost:8000');
</script>

// iframe.html
<script type="text/javascript">
    window.addEventListener("message", function(event) {
        console.log(event);
    }, false);
</script>

No he encontrado otra solución que no sea:

• agregar permitir el mismo origen a la caja de arena (no quería hacer eso)
• usar f.postMessage("hello world!", '*');

NOTA RELACIONADA: Cuando envíe mensajes desde un iframe a la página de host, recibirá este error si olvida usar window.top.postMessage.

Sin .top, está enviando el mensaje a iframes dentro del iframe.

Para verificar si el marco se ha cargado, use la función de carga. O ponga su función principal en carga: recomiendo usar carga al crear el iframe por js

 $('<iframe />', {
   src: url,
   id:  'receiver',
   frameborder: 1,
   load:function(){
     //put your code here, so that those code can be make sure to be run after the frame loaded
   }
   }).appendTo('body');

En mi caso no agregué el http:// prefijo. Potencialmente vale la pena comprobarlo.

En mi caso, el certificado SSL no era válido para el dominio de iframe, así que asegúrese de que la URL de iframe a la que intenta enviar mensajes se abra sin problemas (en caso de que cargue su iframe sobre https).

Estaba tratando de enviar mensajes entre dominios entre la página principal y el iframe incrustado. No se pudo usar
window.postMessage('text', '*'); – el mensaje simplemente nunca se recibió en el lado del iframe.

Cambiar a esto lo clavó:
document.querySelector('iframe').contentWindow.postMessage('text', '*');