Talk to iframes sanely. Framesg manages request/response cycles on top of window.postMessage with ES2015 Promises.

Install via npm, for packaging with a bundler such as Webpack or Browserify:

npm install --save framesg 

If your target environment does not supply Promise natively, provide it with any A+-compliant implementation such as Bluebird.

Register handlers with a target window, e.g., the parent of the current iframe:

import Framesg from 'framesg'; const parentFrame = new Framesg(window.parent, 'my-app', { sayHello: username => alert(`Hello ${username}!`), getUserInfo: userID => userInfo[userID], // response to caller });

The first argument is the window/iframe to communicate with (typically window.parent within an iframe, and iframeEl.contentWindow within a parent where iframeEl is the iframe's DOM element). The second argument ('my-app' in the example above) is a user-supplied namespace. The third argument is an object mapping endpoint names to handler functions.

Send a message to another frame:

parentFrame.send('getWidgetInfo', widgetID) .then(widgetInfo => console.log(widgetInfo)) .catch(err => console.error(`Error getting widget info: ${err}`));

send returns a promise, which is resolved with the response value from the other frame.

If a handler returns a promise rather than an immediate value, the response message is only sent to the other frame when the promise is resolved or rejected, which is useful for asynchronous actions:

const childFrame = new Framesg(iframeEl.contentWindow, 'my-app', { fetchWombatInfo: wombatID => new Promise((resolve, reject) => makeLegacyWombatApiCall( function success(wombatInfo) { resolve(wombatInfo); }, function error(errorMsg) { reject(errorMsg); } ) ), });

More handlers can be added after initialization:

parentFrame.addHandler('marco', () => 'polo');

MIT