2-way postMessage
/**
* Poster
* @param target - DOM node of the target:
* - if it's a parent app - target should be the iframe to which messages are sent
* - if initialisation is inside the iframe - the target would usually be the top/parent window
* @param onMessageReceivedCallback - function that will be called when a message is received FROM the target
*/
const poster = new Poster(target, onMessageReceivedCallback);
/**
* onMessageReceivedCallback
* @param actionName - or channel; any string will do
* @param params - can be a primitive, or a [serialisable](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) object that will be passed along with the message
* @param responseCallback [optional] - if the received message expects a callback - this function should be called
*/
function onMessageReceivedCallback (actionName, params, responseCallback) { }
/**
* poster.send
* @param actionName - or channel; any string will do
* @param params - can be a primitive, or a [serialisable](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) object that will be passed along with the message
* @param responseCallback [optional] - if a callback is needed - the passed function will be called, once the receiver responds to this message
*/
poster.send(actionName, params, responseCallback);
index.html
const p = new Poster(document.getElementById('frame'), (action, params, cb) => {
console.log('parent: onmessage', action, params);
setTimeout(() => {
cb({ response: 'callback from parent' });
}, 1000);
});
p.send('parent-frame', { param: 'param one' }, msg => {
console.log('parent: callback message', msg);
});
frame.html
const p = new Poster(window.top, (action, params, cb) => {
console.log('frame: onmessage', action, params);
setTimeout(() => {
cb({ response: 'callback from frame' });
}, 1000);
});
p.send('parent-frame', { param: 'param one' }, msg => {
console.log('parent: callback message', msg);
});