Всем привет!
В одном из моих проектов мне нужна была технология общения окон браузера друг с другом. Раньше я этого добивался используя 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+