Skip to content
A message bus that operates across iframes
Branch: master
Clone or download
Latest commit 81f006a Dec 5, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update library version in issue template Feb 27, 2017
bin Initial commit Apr 16, 2015
lib Fix issue where postMessage could be called on non-existent window (#19) Dec 5, 2018
spec Fix issue where postMessage could be called on non-existent window (#19) Dec 5, 2018
.eslintignore Update project to use eslint-config-braintree Apr 18, 2016
.gitignore Convert to commonjs distribution Mar 15, 2018
.travis.yml Initial commit Apr 16, 2015
LICENSE Adding include() documentation to README Jun 18, 2015
package.json 3.0.2 Dec 5, 2018

Framebus Build Status npm version

Framebus allows you to easily send messages across frames (and iframes) with a simple bus.

In one frame:

var bus = require('framebus');

bus.emit('message', {
  from: 'Ron',
  contents: 'they named it...San Diago'

In another frame:

var bus = require('framebus');

bus.on('message', function (data) {
  console.log(data.from + ' said: ' + data.contents);


target(origin): framebus

returns: a chainable instance of framebus that operates on the chosen origin.

This method is used in conjuction with publish, subscribe, and unsubscribe to restrict their results to the given origin. By default, an origin of '*' is used.'').on('my cool event', function () {});
// will ignore all incoming 'my cool event' NOT from ''
Argument Type Description
origin String (default: '*') only target frames with this origin

publish('event' [, arg...] [, callback]): boolean

aliases: pub, trigger, emit

returns: true if the event was successfully published, false otherwise

Argument Type Description
event String The name of the event
arg any The data to give to subscribers
callback(data) Function Give subscribers a function for easy, direct replies

subscribe('event', fn): boolean

alises: sub, on

returns: true if the subscriber was successfully added, false otherwise

Unless already bound to a scope, the listener will be executed with this set to the MessageEvent received over postMessage.

Argument Type Description
event String The name of the event
fn([arg...] [, callback]) Function Event handler. Arguments are from the publish invocation
this scope The MessageEvent object from the underlying postMessage

unsubscribe('event', fn): boolean

aliases: unsub, off

returns: true if the subscriber was successfully removed, false otherwise

Argument Type Description
event String The name of the event
fn Function The function that was subscribed

include(popup): boolean

returns: true if the popup was successfully included, false otherwise

var popup ='');

framebus.emit('hello popup and friends!');
Argument Type Description
popup Window The popup refrence returned by


These are some things to keep in mind while using framebus to handle your event delegation

Cross-site scripting (XSS)

framebus allows convenient event delegation across iframe borders. By default it will broadcast events to all iframes on the page, regardless of origin. Use the optional target() method when you know the exact domain of the iframes you are communicating with. This will protect your event data from malicious domains.

Data is serialized as JSON

framebus operates over postMessage using JSON.parse and JSON.stringify to facilitate message data passing. Keep in mind that not all JavaScript objects serialize cleanly into and out of JSON, such as undefined.


Even when the subscriber and publisher are within the same frame, events go through postMessage. Keep in mind that postMessage is an asynchronous protocol and that publication and subscription handling occur on separate iterations of the event loop (MDN).

Published callback functions are an abstraction

When you specify a callback while using publish, the function is not actually given to the subscriber. The subscriber receives a one-time-use function that is generated locally by the subscriber's framebus. This one-time-use callback function is pre-configured to publish an event back to the event origin's domain using a UUID as the event name. The events occur as follows:

  1. publishes an event with a function as the event data

    var callback = function (data) {
        console.log('Got back %s as a reply!', data)
    framebus.publish('Marco!', callback, '');
  2. The framebus on generates a UUID as an event name and adds the callback as a subscriber to this event.

  3. The framebus on sees that a special callback event is in the event payload. A one-time-use function is created locally and given to subscribers of 'Marco!' as the event data.

  4. The subscriber on uses the local one-time-use callback function to send data back to the emitter's origin'')
      .on('Marco!', function (callback) {
  5. The one-time-use function on publishes an event as the UUID generated in step 2 to the origin that emitted the event.

  6. Back on, the callback is called and unsubscribed from the special UUID event afterward.

Development and contributing


You can’t perform that action at this time.