2011-05-17 22 views
5

utilizo unas pocas líneas de Javascript para crear un elemento iframe, y luego me gustaría enviar un mensaje, así:¿Por qué html5 postMessage no funciona para mí?

function loadiframe (callback) { 
    var body = document.getElementsByTagName('body')[0]; 
    var iframe = document.createElement('iframe'); 
    iframe.id = 'iframe'; 
    iframe.seamless = 'seamless'; 
    iframe.src = 'http://localhost:3000/iframe.html'; 
    body.appendChild(iframe); 
    callback(); 
} 

loadiframe(function() { 
    cpframe = document.getElementById('iframe').contentWindow; 
    cpframe.postMessage('please get this message','http://localhost:3000'); 
    console.log('posted'); 
}) 

Y luego, en el interior http://localhost:3000/iframe.html (la fuente del iframe) es algo como esto:

<!DOCTYPE html> 
<html> 
<head> 
<title>does not work</title> 
<script> 
window.addEventListener("message", receiveMessage, false); 
function receiveMessage(event) { 
    if (event.origin == "http://localhost:3000") { 
    document.write(JSON.stringify(event)); 
    document.write(typeof event); 
    } 
} 
</script> 
</head> 
<body> 
</body> 
</html> 

pero no pasa nada ... incluso traté de no utilizar el control de seguridad de origen, pero aun así no pasa nada ... como si nunca recibió el mensaje ...

¿Tengo algún tipo de problema asíncrono? m? Traté de hacer que el iframe se cargó antes de la postMessage se fue ...

EDIT1: Además, no hay errores muestran en la consola ...

Edit2: Lo he probado en Google Chrome 11 y Firefox 4

Gracias de antemano.

Respuesta

4

Hay dos posibles problemas:

  1. Estás llamando callback antes de que el marco secundario se ha cargado - probarlo en caso load o hacerlo en un setTimeout
  2. nunca he conseguido llegar postMessage para trabajar con cualquier otra cosa que '*' como origen. Si pongo una URL allí aparece una advertencia de seguridad "Error de seguridad: el contenido en http://xxx/ no puede cargar datos desde http://yyy/", excepto en la consola de error (Ctrl + Shift + J) no en otro lugar. Sospecho que hay otras cosas que deben establecerse en alguna parte para que funcionen, pero todavía no he descubierto qué.

Here's a jsfiddle con una versión ligeramente modificada de su código cargando un documento fuera de mi dominio, funciona para mí en Firefox y Chrome.

+0

Gracias robertc, funciona con setTimeout y no tuve que establecer '*' como origen (yay por seguridad). Ahora creo que haré que el iframe envíe un mensaje a la ventana principal diciéndole que el iframe está listo, y luego la ventana enviará el mensaje. ¿Crees que es la forma correcta de proceder? –

+0

@ JoãoPintoJerónimo Parece que funcionaría, es como un evento de registro para el 'iframe'. – robertc

+0

Funciona, solo espero que sea la mejor solución. –

Cuestiones relacionadas