Allow postMessage communication

It’d be great to be able to make use of HTML’s postMessage API to enable cross origin comms between the iFrame and the parent page. Particularly useful for the use of a lot of Payment forms where you need to securely pass some info between your page and the iFrame.

Might require some re-tooling to work with DOM and iFrame loading. Perhaps it could be an option in the onLoad function?

https://javascript.info/cross-window-communication

[robbestad]

All right, I’ll fix this. 😃

ons. 17. apr. 2019 kl. 01:08 skrev Juan Carlos Valerio < [e-mail]>:

@svenanders https://github.com/svenanders I was abe to implement this use case (@conorot https://github.com/conorot) in previous versions v1.5.0 to v1.6.2

But this is not supported anymore because since v1.7.0. I guest you migrate the implementation from PureComponent to Stateless or Function Component

Since then this warning is fire by React Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()

And I’m not able to get a reference.

This works on v1.6.2 but not in 1.7.0

import React from ‘react’ import { Button } from ‘antd’

export default class DemoComponent extends React.PureComponent { formRef = { iFrame: null, }

handleSubmit = () => { const { iFrame } = this.formRef if (iFrame && iFrame.refs) { const ref = iFrame.refs.iframe ref.contentWindow.postMessage(‘submit form’, ‘*’) } }

render() { return ( <div> <Iframe url="SOME_URL" width="100%" height="600px" id="legacyEditor" display="initial" position="relative" allowFullScreen ref={this.saveIFrameRef} /> <Button key="submit" type="primary" onClick={this.handleSubmit}> {‘Send message to the IFrame’} </Button> </div> ) } }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/svenanders/react-iframe/issues/43#issuecomment-483876272, or mute the thread https://github.com/notifications/unsubscribe-auth/ABfQp05TYgYEwBVIOyqo5ITEn1iEJoa0ks5vhlgGgaJpZM4a028B .

– Mvh, Sven Anders Robbestad http://www.robbestad.com http://twitter.com/#!/svenardocom

[robbestad]

All right, will look at this next!