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:
importFramesgfrom'framesg';constparentFrame=newFramesg(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:
constchildFrame=newFramesg(iframeEl.contentWindow,'my-app',{fetchWombatInfo: wombatID=>newPromise((resolve,reject)=>makeLegacyWombatApiCall(functionsuccess(wombatInfo){resolve(wombatInfo);},functionerror(errorMsg){reject(errorMsg);})),});More handlers can be added after initialization:
parentFrame.addHandler('marco',()=>'polo');MIT