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 < [email protected]>:

…

@svenanders <https://github.com/svenanders> I was abe to implement this use case ***@***.*** <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 <#43 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABfQp05TYgYEwBVIOyqo5ITEn1iEJoa0ks5vhlgGgaJpZM4a028B> .

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

[adtsoft]

I have code that is very similar to what @jcvalerio is doing. I had to roll back to 1.6.2.

[hlolli]

I get Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

[adtsoft]

@hlolli that is the problem we are discussing. If you use version 1.6.2 the above example from @jcvalerio will work.

[marcantoinepelletier]

Any chance to see this feature added directly into the package ? :)

[veerjainATgmail]

Does this work now? Any suggestions on alternatives? thanks.