Bellhop is a simple event-based communication layer between the page DOM and an iframe. It doesn't require any additional dependencies. Super easy to use and setup.
npm install bellhop-iframe
The Bellhop module contains support for ES6 modules, CommonJS and browser global definitions. To import with ES6,
To import with CommonJS, refer instead to the UMD build
const Bellhop = ;
Lastly, the UMD module can also be directly included on an HTML page. This will declare Bellhop and attach it directly
Here's a very simple example to get started. We have two pages
child.html.This is the minimum you need to start get them talking to each other.
The constructor creates a new
Bellhop instance, taking an optional unique identifier for this instance. If no id is provided, a random one is selected
Bellhop instance to an iframe, or it's containing window. For instance, given a
will connect a child iframe to it's parent, allowing it to emit messages out of the iframe. However,
var iframe = document;bellhop;
allows a containing page to connect with an interior iframe and emit message into the iframe.
disconnect removes any listener for events from another frame, and stops listening for messages altogether
Sends a named message to another iframe:
Convenience methods for automating response of values between the interior and exterior of frames. For instance:
// parent.htmlvar iframe = document;var bellhop = iframe;bellhop;bellhop;// child.htmlvar bellhop = ;bellhop;bellhop;
Property for retrieving the iframe element through which this
Bellhop instance is communicating:
var iframe = document;var bellhop = iframe;console; // true
Copyright (c) 2018 Springroll
Released under the MIT License.