https://github.com/panta82/iframe_bridge
Very basic wrapper around window.postMessage.
https://github.com/panta82/iframe_bridge
iframe javascript npm postmessage postmessage-library
Last synced: 11 months ago
JSON representation
Very basic wrapper around window.postMessage.
- Host: GitHub
- URL: https://github.com/panta82/iframe_bridge
- Owner: panta82
- Created: 2017-09-26T06:35:45.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-10-04T13:32:57.000Z (over 8 years ago)
- Last Synced: 2025-07-31T12:26:39.251Z (11 months ago)
- Topics: iframe, javascript, npm, postmessage, postmessage-library
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# IFrameBridge
Very basic wrapper around window.postMessage. Handles handshaking and JSON conversion. Makes sure you don't lose any messages.
Install from npm:
```bash
npm install --save iframe_bridge
```
Then in your ES6+ code:
```javascript
const IFrameBridge = require('iframe_bridge');
```
or
```javascript
import IFrameBridge from 'iframe_bridge';
```
### Usage
`iframe_bridge.js` file is the compiled browser-ready version of the library. If you reference it with `` tag, the constructor will become available globally as `window.BrowserBridge`. You can also require it from within an ES6 app with your own build system (see above).
Example usage:
(index.html)
```html
<script src="../dist/iframe_bridge.js">
var iFrame = document.getElementById('iframe');
// Create an instance of bridge. By giving it iFrame's window as targetWindow,
// you indicate this instance will work in "server mode",
// and attempt to initiate connection.
var bridge = new IFrameBridge({
targetWindow: iFrame.contentWindow
});
// You then attach your event handlers. You should do this before calling init.
bridge.on('response_from_iframe', (data) => {
console.log(data); // "Hello back"
});
// Once you call init, we will start trying to connect to the iframe
// If you want to wait, just attach .then() to this call, it will return a promise.
bridge.init();
// Any messages you post here, before we are connected, will be queued
// and flushed once connection is established.
bridge.postMessage('event_from_parent', {
message: 'Hello'
});
```
(iframe.html)
```html
// Create an instance of the bridge without giving it targetWindow.
// The parent's window will be determined from the handshake message.
var bridge = new IFrameBridge();
// You can also listen to the generic "message" event. You will get all received events here.
bridge.on('message', (payload) => {
if (payload.name === 'event_from_parent' && payload.data.message === 'Hello') {
bridge.postMessage('response_from_iframe', 'Hello back');
}
});
// Call init to start listening for handshake
bridge.init();
```
You can see a working example here: [tester/index.html](./tester/index.html).
### Additional options
Check out `DEFAULT_OPTIONS` inside [IFrameBridge.js](lib/IFrameBridge.js) for the full list with comments.
This object will be available (and mutable) on `IFrameBridge.DEFAULT_OPTIONS`.
### License
MIT