2010-08-11 22 views
74

Parece que el punto de window.postMessage es permitir la comunicación segura entre ventanas/marcos alojados en diferentes dominios, pero en realidad no parece permitir que en Chrome.¿Cómo se usa window.postMessage en todos los dominios?

Este es el escenario:

  1. Insertar un <iframe> (con un src el dominio B *) en una página en el dominio A
  2. El <iframe> termina siendo sobre todo un guión < > etiqueta, al final de la cual es la ejecución ...
  3. llamo window.postMessage (some_data, page_on_A)

El <iframe> es sin duda en el contexto del dominio B, y he confirmado que el javascript incrustado en que <iframe> ejecuta correctamente y llama postMessage con los valores correctos.

me sale este mensaje de error en Chrome:

No se puede enviar mensaje a Un. El destinatario tiene origen B.

Aquí está el código que registra un evento de escucha de mensajes en la página en la A:

window.addEventListener(
    "message", 
    function (event) { 
    // Do something 
    }, 
    false); 

También he intentado llamar window.postMessage(some_data, '*'), pero todo lo que hace es suprimir el error.

¿Me falta el punto aquí, es window.postMessage (...) no destinado para esto? ¿O lo estoy haciendo horriblemente mal?

* texto tipo Mime/html, que debe permanecer.

+1

Usted es probablemente consciente de esto ya, pero MDC tiene una excelente resumen en postMessage: https://developer.mozilla.org/en/DOM/window.postMessage Obviamente, para la implementación de FF, pero tal vez haya algo allí que explique por qué no funciona. –

Respuesta

66

Aquí hay un ejemplo que funciona en Chrome 5.0.375.125.

La página B (contenido anidado):

<html> 
    <head></head> 
    <body> 
     <script> 
      top.postMessage('hello', 'A'); 
     </script> 
    </body> 
</html> 

Nota el uso de top.postMessage o parent.postMessage no window.postMessage aquí

La página A:

<html> 
<head></head> 
<body> 
    <iframe src="B"></iframe> 
    <script> 
     window.addEventListener("message", 
      function (e) { 
       if(e.origin !== 'B'){ return; } 
       alert(e.data); 
      }, 
      false); 
    </script> 
</body> 
</html> 

A y B debe ser algo como http://domain.com

EDIT:

De another question, parece los dominios (A y B aquí) debe tener un / para la postMessage para que funcione correctamente.

+3

Cuando la página A comprueba el origen del mensaje, el origen NO contendrá un '/' posterior. No parece importar si la página B especifica un '/' posterior o no. La otra cosa a tener en cuenta es que las URL deben ser URL absolutas. – Catch22

+1

Esta respuesta me dejó un poco confundido y aún estoy buscando una respuesta. http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage contiene una muy buena explicación de postMessage. Lo importante es que el remitente del mensaje conozca el dominio del receptor. En el ejemplo anterior, A y B no tienen que ser los mismos dominios, pero B debe saber exactamente qué dominio usa A. –

+1

La pregunta es sobre dominios cruzados. La respuesta aceptada es sobre el mismo dominio. – stackular

1

Probablemente intenta enviar sus datos de midominio.com a www.midominio.com o al revés, NOTE que se perdió "www". http://mydomain.com y http://www.mydomain.com son dominios diferentes a javascript.

+1

En un proyecto que estoy haciendo, estoy usando 'file: ///' ¿Es posible ¿obtiene errores de dominio cuando extrae contenido únicamente del sistema de archivos local? – Jacksonkr

15

Debería publicar un mensaje del marco al principal, después de cargarlo.

script de fotograma:

$(document).ready(function() { 
    window.parent.postMessage("I'm loaded", "*"); 
}); 

Y escucha en los padres:

function listenMessage(msg) { 
    alert(msg); 
} 

if (window.addEventListener) { 
    window.addEventListener("message", listenMessage, false); 
} else { 
    window.attachEvent("onmessage", listenMessage); 
} 

Use este enlace para más información: http://en.wikipedia.org/wiki/Web_Messaging

Cuestiones relacionadas