Using HTML5 postMessage for Communication
Gadgets support
Window.postMessage for inter-gadget communication across different domains. For more information about
Window.postMessage() method, refer to
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage.
To set up communication between a source gadget and target gadget
1. Open the controller.js file of the target gadget and add the following in the defineListeners block:
this.eventBus.addHTML5EventListener(HTML5_EVENT_TYPE.MESSAGE,this.
_handleHTML5Events.bind(this), <TRANSFER>,<CONTEXT>);
<TRANSFER> (Optional): Is a sequence of Transferable objects that
are transferred with the message. The ownership of these objects
is given to the destination side and they are no longer usable
on the sending side.
<CONTEXT>(Optional): Any string context you want to associate the
event to.
For example, this.eventBus.addHTML5EventListener(HTML5_EVENT_TYPE
.MESSAGE,this._handleHTML5Events.bind(this),false, ‘MY_HTML5_EVENT’);
2. In the destroy block of the target gadget, add the following:
this.eventBus.removeHTML5EventListener(HTML5_EVENT_TYPE.MESSAGE,this.
_handleHTML5Events.bind(this),this,<CONTEXT> );
<CONTEXT>(Optional): Any string context you want to associate the
event to.
For example, this.eventBus.removeHTML5EventListener(HTML5_EVENT_TYPE
.MESSAGE,this._handleHTML5Events.bind(this),’MY_HTML5_EVENT’’);
3. Add a new block called _handleHTML5Events in the following format:
_handleHTML5Events: function(payload) {
...business logic is defined here....
},
4. Open the controller.js file of the source gadget and add the following to send a postMessage event: