PostMessaging made simpler!
Cross domain communication using post message, promisified!
NPM users: npm install cross-talk --save
Yarn users: yarn add cross-talk
Import CrossTalk in your project using ES6 syntax:
import CrossTalk from 'cross-talk'
The first thing that needs to be done is init CrossTalk with config options.
CrossTalk.init({
targetWindow: document.getElementById('myIFrame').contentWindow,
targetEndpoint: 'http://test.example.com',
sourceIdentifier: '@example-source',
targetIdentifier: '@example-target'
})
CrossTalk.on('message-type', (data) => {
// handle the data
});
on
will listen for a message of type message-type
from other windows.
Note that CrossTalk.on(...)
does not return a promise as it is an ongoing subscription to the message-type
events coming from external sources.
However it does return an Observable subscription
that allows you to unsubscribe from the subscription at any point of time.
CrossTalk.once('message-type')
.then((data) => {
// handle the data
});
Calling once
will subscribe to the message-type
event coming from external sources and will unsubscribe if the event occurs once. So your handler will be only called once.
Note that CrossTalk.on(...)
returns a Promise which gets resolved when an event of the specified type occurs.
CrossTalk.send('message-type', data);
If you just want to send a message to targets and don't care of their actions, use send(...)
. It doesn't return anything.
CrossTalk.sendForResult('message-type', data)
.then((data) => {
// handle the data
});
sendForResult(...)
sends the event to target and waits for the same event to be received from external sources. It calls once(...)
on the message-type
provided by you and returns a promise.
CrossTalk.stop();
This removes the event listener on message
, clears the config object and the list of events occurred and not yet handled.
- Add support for multiple targets
- Add possibility to provide config for individual actions.
- Add example and demo
- Add tests
Open an issue and feel free to contribute to this project.