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.js to have FrameCourier assigned as a global variable.
Import /src/index.js into your script to assign to your own internal variable.

FAQs

What is @packaged-ui/frame-courier?

Is @packaged-ui/frame-courier well maintained?

Package last updated on 14 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@packaged-ui/frame-courier

FrameCourier

Launching Demo