HTML5 — Веб-сообщения

Web Messaging — это способ, позволяющий документам разделять контекст просмотра для обмена данными без Dom. Он преодолевает проблему междоменной связи в разных доменах, протоколах или портах

Например, вы хотите отправить данные со своей страницы в рекламный контейнер, который помещается в iframe или наоборот, в этом случае Browser выдает исключение безопасности. С помощью веб-сообщений мы можем передавать данные как событие сообщения.

Сообщение Событие

Возникают события сообщений Перекрестный обмен сообщениями, обмен сообщениями по каналам, отправленные сервером события и веб-сокеты. Он описан интерфейсом событий сообщений.

Атрибуты

данные

Содержит строковые данные

происхождения

Содержит доменное имя и порт

lastEventId

Содержит уникальный идентификатор для текущего события сообщения.

источник

Содержит ссылку на окно исходного документа

порты

Содержит данные, которые отправляются любым портом сообщения

Отправка кросс-документа сообщения

Перед отправкой кросс-документа, нам нужно создать новый контекст веб-просмотра, создав новый фрейм или новое окно. Мы можем отправить данные используя postMessage (), и у него есть два аргумента. Они как —

• сообщение — сообщение для отправки
• targetOrigin — Имя происхождения

Примеры

Отправка сообщения из iframe на кнопку

var iframe = document.querySelector('iframe');
var button = document.querySelector('button');

var clickHandler = function() {
   iframe.contentWindow.postMessage('The message to send.',
      'https://www.tutorialspoint.com);
}
button.addEventListener('click',clickHandler,false);

Получение сообщения кросс-документа в принимающем документе

var messageEventHandler = function(event){
   
   // check that the origin is one we want.
   if(event.origin == 'https://www.tutorialspoint.com') {
      alert(event.data);
   }
}
window.addEventListener('message', messageEventHandler,false);

Канал обмена сообщениями

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

Объекты MessageChannel и MessagePort

При создании messageChannel он внутренне создает два порта для отправки данных и перенаправляется в другой контекст просмотра.

• postMessage () — Опубликовать сообщение, бросить канал

• start () — отправляет данные

• close () — закрывает порты

postMessage () — Опубликовать сообщение, бросить канал

start () — отправляет данные

close () — закрывает порты

В этом случае мы отправляем данные из одного iframe в другой iframe. Здесь мы вызываем данные в функции и передаем данные в DOM.

var loadHandler = function() {
   var mc, portMessageHandler;
   mc = new MessageChannel();
   window.parent.postMessage('documentAHasLoaded','http://foo.example',[mc.port2]);
   
   portMessageHandler = function(portMsgEvent) {
      alert( portMsgEvent.data );
   }
   
   mc.port1.addEventListener('message', portMessageHandler, false);
   mc.port1.start();
}
window.addEventListener('DOMContentLoaded', loadHandler, false);

Выше кода, он принимает данные из порта 2, теперь он будет передавать данные во второй iframe

var loadHandler = function() {
   var iframes, messageHandler;
   iframes = window.frames;
   
   messageHandler = function(messageEvent) {
      
      if( messageEvent.ports.length > 0 ) {
         
         // transfer the port to iframe[1]
         iframes[1].postMessage('portopen','http://foo.example',messageEvent.ports);
      }
   }
   window.addEventListener('message',messageHandler,false);
}
window.addEventListener('DOMContentLoaded',loadHandler,false);

Теперь второй документ обрабатывает данные с помощью функции portMsgHandler.