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 = ;
You can also import the UMD version by using import
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.