До сих пор я видел только учебники для postmessage, где одно окно отправляет один вид сообщения, а другое окно интерпретирует сообщение только одним способом.
Что делать, если я хочу иметь много разных видов взаимодействия между окнами, может ли postmessage обрабатывать это?
Это противоречит тому, что должно делать postmessage?
Например, что, если я хочу иметь возможность отправлять пользовательские обратные вызовы взад и вперед и т.д.?
Существует несколько способов передать многочастное сообщение обработчику 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 (источник), данные, которые вы передаете обработчику postmessage, могут быть объектом. Объект будет сериализован, поэтому на этом фронте есть некоторые проблемы, но:
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 объекта перед передачей, только в первом случае браузер выполняет свою собственную сериализацию (и последующую нессеризацию) тогда как с последним маршрутом вам придется сериализовать /unserialize.
Точки вылета здесь:
Документация и ссылки
window.postMessage: https://developer.mozilla.org/en/DOM/window.postMessageString.split: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/splitJSON.stringify: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/stringifyJSON.parse: https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/JSON/parseЕсть хороший плагин, который я нашел на npm под названием "серебристая пуля" . Он выполняет postMessage с обратными вызовами и использует eventEmitter для получения определенных событий. Это очень приятно.
Но для реализации этого я бы сделал что-то вроде...
phostMessage(iframe, someObj, callback);
Вы должны сделать это:
Вот очень простая демонстрация этого:
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), '*');
который позволяет асинхронным вещам.
Один довольно простой способ вызвать обратные вызовы без передачи какого-либо реального кода:
Target
var callbacks = {
myCallback: function() { doSomething(); }
};
window.addEventListener('message', function (ev) {
// origin checking etc
callbacks[ev.data]();
}, false);
Источник
target.postMessage('myCallback', 'http://www.example.com');