当 html 页面已经通过 Reactjs 中的 Iframe 打开时如何检测 addEventlistener

Question

我想检测我在 ReactApp 中的更改，并想在通过 Iframe 打开的 Html 页面中应用这些更改。

场景：我想使用 PostMessage 处理程序将我的 selected/changed 数据更新到我已经打开的 html 页面。

我尝试使用“window.postMessage”和“window.AddEventlistener”进行此操作，但我的更改并未反映在此处。我需要改变什么才能完成这项工作。有什么建议吗？

//test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <script>
      window.addEventListener("message", receiveMessage, false);

      function receiveMessage(event)
      
      {
        if(event) {
          
          console.log(event.target.value, "hello"); // The idea is too receive the device selected 
        }
        
      }
    </script>
    
</head>
<div>
  <tr>
    Hii
  </tr>
</div>
</body>
</html>

//ReactApp页面

  handleSelectDevice(type, event) {

    window.postMessage(JSON.stringify({'data': event.target.value}), "*");

  }

//IframeReactjs页面

class Test extends React.Component {

  render() {
    const testUrl = process.env.PUBLIC_URL+"/test.html";
    return (
      <Iframe id="testid" src={testUrl} width="100%" height={240} />
    );
  }
}

export default Test;

Answer 1

调用postMessage().

时需要使用iframe的“window”，而不是主window对象

考虑到 ifr 是引用 (HTMLIFrameElement) 中的 iframe 元素的变量，它的 window 是在 ifr.contentWindow 中定义的，因此调用类似于

ifr.contentWindow.postMessage(...);

此处有更多详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

更新：
这里的虚拟工作示例：https://codesandbox.io/s/react-example-createref-postmessage-nh881?file=/src/App.js

Answer 2

使用useRef hook to get the iframe reference, then call postMessage function using HTMLIFrameElement.contentWindow

class Test extends React.Component {
  render() {
    const testUrl = process.env.PUBLIC_URL + "/test.html";
    return (
      <Iframe
        ref={this.props.innerRef} //--> pass reference as property
        id="testid"
        src={testUrl}
        width="100%"
        height={240}
      />
    );
  }
}

然后在app.js

 const ref = useRef(null); // reference to iframe

 handleSelectDevice(type, event) {
     // --> postMessage to the iframe
     ref.current.contentWindow.postMessage(JSON.stringify({'data': event.target.value}), "*");
 }

<Test innerRef={ref}/>

Test.html

window.addEventListener("message", (event) => {
  console.log(event); // --> listen for messages
});

您可以通过event.data获取消息数据，更多详情here

当 html 页面已经通过 Reactjs 中的 Iframe 打开时如何检测 addEventlistener

How to detect addEventlistener when html page is already opened via Iframe in Reactjs

javascript

postmessage

addeventlistener

reactjs