[315]
06 Апр 2014, 23:00

Работа с 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+

#javascript, #html5

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Нетология
Лучшее
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 980]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 972]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 838]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 831]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 826]
[118]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 807]
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 766]
[4]
19 Июн 2018, 16:24
React и ReactDOM
[просмотров 665]
Aliexpress WW