post-bridge

a sample post message for cross sandbox.

Usage no npm install needed!

<script type="module">
  import postBridge from 'https://cdn.skypack.dev/post-bridge';
</script>

README

post-bridge

a sample post message for cross sandbox.

get started

yarn add post-bridge
# or
npm i post-bridge

how to use ?

1. Send Message -- From Page to Frame

in Page

// Import Package
import postBridge from "post-bridge";

// Get Frame Node
const frame = document.querySelector(`#frame`);

// New Bridge
const bridge = new postBridge(frame);

// Send Message to Frame
bridge.send("sendMessageInPage", { key: "value" });

in Frame

// Import Package
import postBridge from "post-bridge";

// New Bridge
const bridge = new postBridge(frame);

// Receive Message From Page
bridge.receive("sendMessageInPage", data => {
  console.log(data);
});

2. Send Message -- From Frame to Page

in Frame

// Import Package
import postBridge from "post-bridge";

// New Bridge
const bridge = new postBridge();

// Send Message to Frame
bridge.send("sendMessageInFrame", { key: "value" });

in Page

// Import Package
import postBridge from "post-bridge";

// New Bridge
const bridge = new postBridge(frame);

// Receive Message From Page
bridge.receive("sendMessageInFrame", data => {
  console.log(data);
});