0

Im trying to accomplish the same as what is explained on this SO question but in ReactJS. Which is calling a function that belongs to the parent from the page contained in the iframe, passing also parameters from the child to the parent.

So far I have in the parent page:

handleClickOnParent(someParams){
    alert("My son clicked!"+someParams);
}

In the page contained in the iframe, the following:

handleClick(){
    window.parent.handleClickOnParent(localParameters)
}
render(){
    return(
        <button onClick = {() => { this.handleClick() }}>Click me</button>
    );
}

From which I get:

Uncaught TypeError: window.parent.handleClickOnParent is not a function

How can I call a function that is only available on the parent. I also tried passing the function as a prop, but it's not accesible from the iframe page, because it's not a component, it's a frame.

subharb
  • 3,374
  • 8
  • 41
  • 72

1 Answers1

0

You can wrap the <iframe> inside a Component, and then pass the function as a prop, something like:

class IFrameComponent extends React.Component {
   render() {
     <iframe onClick={this.props.handleFunction}>
   }
}

And then use it like:

<IFrameComponent handleFunction={this.handlingFunction} />
Marcio Azevedo
  • 11
  • 1
  • 1
  • but I need that the page loaded in the iframe makes the call, because it will contain some parameters that I want to pass on to the parent. – subharb Feb 01 '18 at 14:11