React iFrame communication
A React component for communicating between a parent window and an iframe.
Demo
Live Demo: https://pbojinov.github.io/react-iframe-comm/
Or locally run:
npm install
npm run storybook
Then open http://localhost:9009/ in your browser.
Installation
The easiest way to use React Iframe Communication is to install it from NPM.
npm install react-iframe-comm --save
At this point you can import react-iframe-comm
in your application as follows:
;
Usage
;; const Demo = { // the html attributes to create the iframe with // make sure you use camelCase attribute names const attributes = src: "https://pbojinov.github.io/iframe-communication/iframe.html" width: "100%" height: "175" frameBorder: 1 // show frame border just for fun... ; // the postMessage data you want to send to your iframe // it will be send after the iframe has loaded const postMessageData = "hello iframe"; // parent received a message from iframe const onReceiveMessage = { console; }; // iframe has loaded const onReady = { console; }; return <IframeComm attributes=attributes postMessageData=postMessageData handleReady=onReady handleReceiveMessage=onReceiveMessage /> ;}; ;
Configuration Options
IframeCommpropTypes = /* Iframe Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Attributes React Supported Attributes https://facebook.github.io/react/docs/dom-elements.html#all-supported-html-attributes Note: attributes are camelCase, not all lowercase as usually defined. */ attributes: PropTypesshape allowFullScreen: PropTypes frameBorder: PropTypes height: PropTypes name: PropTypesstring scrolling: PropTypesstring // https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/ sandbox: PropTypesstring srcDoc: PropTypesstring src: PropTypesstringisRequired width: PropTypes // Callback function called when iFrame sends the parent window a message. handleReceiveMessage: PropTypesfunc /* Callback function called when iframe loads. We're simply listening to the iframe's `window.onload`. To ensure communication code in your iframe is totally loaded, you can implement a syn-ack TCP-like handshake using `postMessageData` and `handleReceiveMessage`. */ handleReady: PropTypesfunc /* You can pass it anything you want, we'll serialize to a string preferablly use a simple string message or an object. If you use an object, you need to follow the same naming convention in the iframe so you can parse it accordingly. */ postMessageData: PropTypesanyisRequired /* Enable use of the browser's built-in structured clone algorithm for serialization by settings this to `false`. Default is `true`, using our built in logic for serializing everything to a string. */ serializeMessage: PropTypesbool /* Always provide a specific targetOrigin, not *, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site. */ targetOrigin: PropTypesstring;
License
The MIT License (MIT) - 2017