Question

我试图在this SO question但在ReactJS中完成相同的操作。这是从iframe中包含的页面调用属于父项的函数，也将参数从子项传递给父项。

到目前为止，我在父页面中有：

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

在iframe中包含的页面中，包含以下内容：

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

我从中得到：

未捕获的TypeError：window.parent.handleClickOnParent不是函数

如何调用仅在父级上可用的函数。我也尝试将该函数作为道具传递，但它不能从iframe页面访问，因为它不是一个组件，它是一个框架。

Answer 1

您可以将<iframe>包装在Component中，然后将该函数作为prop传递，例如：

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

然后使用它：

<IFrameComponent handleFunction={this.handlingFunction} />

使用reactjs在父iframe上调用函数

1 个答案: