Allow postMessage communication

[conorot]

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, will look at this next!

[jcvalerio]

@svenanders I was abe to implement this use case (@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', '*')
    }
  }

  saveIFrameRef = formRef => {
    this.formRef.iFrame = formRef
  }

  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>
    )
  }
}

[robbestad]

All right, I'll fix this. :)

ons. 17. apr. 2019 kl. 01:08 skrev Juan Carlos Valerio < notifications@github.com>:

@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 (