Работа с postMessage

Всем привет!

В одном из моих проектов мне нужна была технология общения окон браузера друг с другом. Раньше я этого добивался используя Flash и ActionScript. Время идет и мой выбор пал на технологию postMessage.

postMessage — это технология из HTML5 позволяющая всплывающим окнам браузера или «АЙфреймам» общаться между собой используя обычные сообщения. При этом окна могут быть с любых доменов, не важно.

Поддерживает ли браузер postMessage?

if (!!window.postMessage) { alert ('Да поддерживает!'); }

Как использовать postMessage?

Для того, чтобы отправить сообщение в окно браузера, нужно использовать одноименный метод postMessage.

win.postMessage(message, targetOrigin);

message — сообщение. Может быть любым объектом, но IE поддерживает только строки. Так что лучше всего использовать JSON.
targetOrigin — Домен, с которого должно быть окно для получения им сообщения. Можно указать звездочку «*», если хотим обмениваться сообщениями с любыми доменами.

var win = window.open('http://dev.webonrails.ru'); win.postMessage("Привет окно!", 'http://dev.webonrails.ru');

Для того, чтобы получить сообщение, нужно использовать событие onmessage.

function listener(event) { if(event.origin != "http://webonrails.ru") return; alert(event.data); event.source.postMessage("Hi, hi Web.onRails", event.origin); };
window.addEventListener("message", listener, false);

Свойства объекта события:

data — Содержит полученное сообщение;
origin — Источник, из которого пришло сообщение, например http://webonrails.ru.
source — Ссылка на окно, с которого пришло сообщение. Нужно для ответа.

Почему-то обработчик события можно вешать только через addEventListener, воспользоваться window.onmessage у меня не получилось.

Кстати IE8 и IE9 поддерживают только frame и iframe.

Поддержка браузеров: Chrome 1.0+, Firefox 6.0+, IE 8.0+, Opera 9.5+, Safari (WebKit) 4.0+