@packaged-ui/frame-courier
v4.1.3
Published
High level interface to window.postMessage. This package makes it easy to send and receive secure messages cross-origin.
Downloads
48
Readme
FrameCourier
High level interface to window.postMessage. This package makes it easy to send and receive secure messages cross-origin.
Launching Demo
- Compile the distribution (
yarn install && yarn build) - Serve the demo. The simplest way (if you have php enabled) is to use the php built-in webserver
php -s localhost:8111 -t . - Open the browser http://localhost:8111/demo/
Basic Usage
Frames
FrameCourier requires frames to be named. This name will be used as the target of communication of FrameCourier.sendMessage
<body>
<iframe courier-name="myframe" src="/myframe.html"></iframe>
</body>Listeners
FrameCourier.listen(
'my event',
function(payload) { alert(payload); }
);Sending Messages
FrameCourier.send(
'myframe', // target frame name
'my event', // event (listener)
'my message' // payload
);Advanced Usage
Bidirectional communication
Use built in response callbacks to send messages back to the originating frame.
FrameCourier.listen(
'my event',
function(payload, respond) { alert(payload); respond('response payload'); }
);FrameCourier.send(
'myframe', // target frame name
'my event', // action (listener)
'my message', // payload
function(responsePayload) { alert('got response: ' + responsePayload); }
);Implementation
- Use
/dist/frame-courier.min.jsto haveFrameCourierassigned as a global variable. - Import
/src/index.jsinto your script to assign to your own internal variable.