Есть несколько способов передать сообщение, состоящее из нескольких частей, обработчику postMessage. Первый (и менее «чистый» способ) - использовать символ-разделитель, а затем передавать данные через строку.

Допустим, мы хотели передать идентификатор пользователя, действие и имя пользователя. Строка будет выглядеть так:

54|do_logout|chris

В обработчике postMessage переданные данные могут быть split (docs) на символе | , то каждый сегмент сообщения можно использовать по мере необходимости.

Другой путь, вместо создания / разделения строки вручную, заключается в использовании JSON (docs) для преобразовать объект в строку с одной стороны и использовать JSON для обратного преобразования в объект в обработчике.

var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(JSON.stringify(pass_data), "http://www.example.net");

... затем в обработчике:

function (event) {
    var pass_data = JSON.parse(event.data);
}

Не забудьте, однако, протестировать, поскольку объект JSON предоставляется не во всех пользовательских агентах, особенно в старых. Существует много (много, много) сторонних библиотек для ограничения поддержки JSON, так что пусть вас не пугает отсутствие полного принятия - JSON определенно является безопасным стандартом для «продвижения вперед».

Разве не было бы лучше, если бы мы могли сразу пройти мимо этого объекта? Что ж, глядя в Firefox 6 (источник), данные, которые вы передаете обработчику пост-сообщения, могут быть объектом . Объект будет сериализован, поэтому есть некоторые проблемы на этом фронте, но:

var pass_data = {
    'name':'Chris',
    'id':54,
    'action':'do_logout'
};
target_window.postMessage(pass_data, "http://www.example.net");

Немного лучше, а? К сожалению, текущие версии IE работают только со строками. Мне не удалось найти обсуждения будущих планов относительно postMessage для IE 10. Кроме того, в IE 8/9 есть известная ошибка, которая нарушает postMessage что-либо, кроме фреймов. (источник).

Переходя к конкретному аспекту вашего вопроса - обратным вызовам. Если вы не можете передать обратный вызов по имени функции, нет способа передать функцию; никаких анонимных функций для вас. Это связано с тем, как данные фактически передаются обработчику. На практике «не существует» поддержки объектов как данных, за кулисами браузер превращает переданный объект в строку (сериализация).

Таким образом, вы должны понимать, что передача объекта в точности такая же, как использование JSON для stringify объекта перед передачей, только в первом случае браузер выполняет собственную сериализацию (и последующую десериализацию), тогда как во втором маршруте Вам решать сериализовать / десериализовать.

Пункты приема пищи здесь:

• postMessage по-прежнему имеет ограниченную кроссбраузерную поддержку
• Тенденция к появлению новых версий браузеров, соответствующих стандартам, заключается в том, чтобы разрешить прохождение объектов в дополнение к строкам.
• Переданный объект будет сериализован, поэтому ссылки на функции не допускаются.
• Самая широкая поддержка «в дикой природе» предназначена для данных, состоящих только из строк, что означает, что вам придется придерживаться строк и «упаковать» свои данные, как показано выше, если вы хотите поддерживать широкий спектр пользовательских агентов.
• Internet Explorer испортит любой план, который вы когда-либо составляли (включая семейный отдых)

Документация и справочные материалы

• window.postMessage: https://developer.mozilla.org/en/DOM/window.postMessage
• String.split: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split
• Заметки о поддержке HTML5 в IE 8/9: http://blogs.msdn.com/b/ieinternals/archive/2009/09/16/bugs-in-ie8-support-for-html5-postmessage-sessionstorage-and-localstorage.aspx
• JSON.stringify: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringify
• JSON.parse: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/parse

Обратные вызовы с postMessage: очень возможно и очень полезно

На npm я нашел хороший плагин под названием "silver-bullet". Он выполняет postMessage с обратными вызовами и использует eventEmitter для получения определенных событий. Это очень приятно.

Но для реализации этого я бы сделал что-то вроде ...

phostMessage(iframe, someObj, callback);

Вы должны сделать это:

1. Вам нужен общий идентификатор обратного вызова, передаваемый между кадрами, обменивающимися данными.
2. Отправитель создает уникальный идентификатор обратного вызова для каждого сообщения и сохраняет его в поисковом хэше обратного вызова, чтобы найти обратный вызов после отправки.
3. Получатель сообщения только обеспечивает отправку идентификатора обратного вызова.
4. Все взаимодействующие фреймы используют для этого одну и ту же библиотеку JS.

Вот простая демонстрация этого:

var callbacks = {};

// when receiving messages
window.addEventListener('message', function(ev) {
  // todo: add origin check
  if (!ev.data)
    return;

  var message;
  try {
    message = JSON.parse(ev.data);
  } catch (ex) {
    console.error(ex);
  }

  // ignore messages not having a callback ID
  if (!message || !message.callbackId)
    return;

  // we are the sender getting the callback
  if (callbacks[message.callbackId]) {
    callbacks[message.callbackId](message);
    delete callbacks[message.callbackId];
    return;
  }

  // we are the receiver so we respond with the callback ID
  // todo: restrict who can receive message (last param)
  iframe.contentWindow.postMessage(JSON.stringify(message), '*');
});

// when sending messages
function phostMessage(iframe, obj, callback) {
  obj.eventId = Math.random();
  callbacks[obj.eventId] = callback;
  // todo: restrict who can receive message (last param)
  iframe.contentWindow.postMessage(JSON.stringify(obj), '*');
}

Я немного углублю эту концепцию и использую поиск обработчика сообщений, в котором сообщение имеет желаемое имя функции обработчика, чтобы вызвать и передать сообщение. Обработчик сообщений также принимает обратный вызов, который по завершении запускает обратный вызов. Обратный вызов просто имеет простую логику повторного вызова собственного почтового сообщения, отправляющего обратно его полученный идентификатор обратного вызова.

Итак, последняя строка кода для обработки события сообщения будет следующей:

if (messageHandler[message.handler])
  messageHandler[message.handler](message, function() {
    iframe.contentWindow.postMessage(JSON.stringify(message), '*');
  });
else
  iframe.contentWindow.postMessage(JSON.stringify(message), '*');

что позволяет происходить асинхронным вещам.

Недавно я столкнулся с той же проблемой. После нескольких часов поиска я наткнулся на пост-робота. Он разработан paypal и решил большинство моих проблем, включая обратный вызов для postMessage.

Он также поддерживает передачу функций внутри полезной нагрузки.

Вы можете ознакомиться с введением здесь Представляем пост-робота

Один довольно простой способ запускать обратные вызовы без передачи фактического кода:

Цель

var callbacks = {
  myCallback: function() { doSomething(); }
};
window.addEventListener('message', function (ev) {
  // origin checking etc
  callbacks[ev.data]();
}, false);

Источник

target.postMessage('myCallback', 'http://www.example.com');