Name: framesg
Owner: Mixpanel, Inc
Description: request/response communication to/from iframes
Created: 2016-03-18 07:05:06.0
Updated: 2017-07-06 02:00:00.0
Pushed: 2017-07-06 01:59:13.0
Homepage: null
Size: 9
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
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:
rt Framesg from 'framesg';
t parentFrame = new Framesg(window.parent, 'my-app', {
yHello: username => alert(`Hello ${username}!`),
tUserInfo: 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:
ntFrame.send('getWidgetInfo', widgetID)
hen(widgetInfo => console.log(widgetInfo))
atch(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:
t childFrame = new Framesg(iframeEl.contentWindow, 'my-app', {
tchWombatInfo: wombatID => new Promise((resolve, reject) =>
makeLegacyWombatApiCall(
function success(wombatInfo) { resolve(wombatInfo); },
function error(errorMsg) { reject(errorMsg); }
)
More handlers can be added after initialization:
ntFrame.addHandler('marco', () => 'polo');
MIT