2010-08-11 5 views
74

Кажется, что точка window.postMessage - это безопасная связь между окнами/кадрами, размещенными на разных доменах, но на самом деле она не выглядит , которая позволяет, что в Chrome.Как вы используете window.postMessage через домены?

Вот сценарий:

  1. встраивать <IFrame> (с src на домен B *) на странице в домене А
  2. <IFrame> заканчивает тем, что по большей части < сценарий > тег, в конце которого исполнение ...
  3. Я вызываю window.postMessage (some_data, page_on_A)

<IFrame> наиболее определенно в контексте домена B, и я подтвердил, что встроенный Javascript в этом <IFRAME> выполняет должным образом и вызывает postMessage с правильными значениями.

Я получаю сообщение об ошибке в Chrome:

Невозможно опубликовать сообщение для . Получатель происхождение B.

Вот код, который регистрирует событие слушателя сообщений на странице, посвященной A:

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

Я также попытался назвать window.postMessage(some_data, '*'), но все, что делает подавить ошибку.

Я просто пропустил пункт здесь, является window.postMessage (...), не предназначенным для этого? Или я просто делаю это ужасно неправильно?

* Mime-type text/html, который он должен оставаться.

+1

Вы, наверное, знаете об этом уже, но MDC имеет отличное изложение на postMessage: https://developer.mozilla.org/en/DOM/window.postMessage Очевидно, что для реализации FF, возможно, есть что-то, что объясняет, почему это не работает. –

ответ

66

Вот пример, который работает на Chrome 5.0.375.125.

страница B (содержание IFrame):

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

Обратите внимание на использование top.postMessage или parent.postMessage не window.postMessage здесь

Страница 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 и B должно быть что-то подобные http://domain.com

EDIT:

С another question, он выглядит домены (A и B здесь) должны / для postMessage, чтобы работать должным образом.

+3

Когда страница A проверяет происхождение сообщения, источник не будет содержать конечный '/'. Кажется, что не имеет значения, указывает ли страница B конечный «/» или нет. Другое дело, что URL-адреса должны быть абсолютными URL-адресами. – Catch22

+1

Этот ответ оставил меня немного смущенным и все еще искал ответ. http://blog.teamtreehouse.com/cross-domain-messaging-with-postmessage содержит очень хорошее объяснение postMessage. Важно то, что отправитель сообщения знает домен получателя. В приведенном выше примере A и B не обязательно должны быть теми же доменами, но B должен точно знать, какой домен используется A. –

+1

Вопрос о междоменном. Принятый ответ о том же домене. – stackular

1

Возможно, вы пытаетесь отправить свои данные с mydomain.com на www.mydomain.com или наоборот, ПРИМЕЧАНИЕ. Вы пропустили «www». http://mydomain.com и http://www.mydomain.com - это разные домены для javascript.

+1

В проекте, который я выполняю, я использую 'file: ///' Возможно ли получать ошибки домена при вытягивании содержимого исключительно из локальной файловой системы? – Jacksonkr

15

После загрузки следует отправить сообщение из кадра в родительский.

рамки сценария:

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

И слушать его родителей:

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

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

Используйте эту ссылку для получения дополнительной информации: http://en.wikipedia.org/wiki/Web_Messaging

Смежные вопросы