window.onmessage 在反应 js 组件中不起作用

Question

我必须在 iframe 中加载 react js 应用程序，并且父应用程序正在使用以下代码向 iframe 反应应用程序发送数据：

  const myiframe = document.getElementById('myIframe');
  myiframe.contentWindow.postMessage('message', '*');


  <iframe id='myIframe' name="my-iframe" src="http://localhost:3000" ></iframe>

在 iframe 应用中，我正在尝试接收数据：

useEffect(() => {
    window.onmessage = function (event) {
      console.log('event received')
    }
  }, []);

但是window.onmessage永远不会触发或间歇性触发。

我通过将 window.onmessage 保持在 useEffect 之外进行检查，但它不起作用。

有人遇到过这个问题吗？需要帮助。

谢谢。

Answer 1

这是简单的代码，iframe 中的内容和父应用中的内容并不重要， 我们只需要在像window这样的全局变量上共享一个函数

在你的父应用中调用：

window.callMe('Hello world');
or
window.callMe({status:true, message:'hello world'});

在您的 iframe 中（在您的示例中做出反应）只需在父窗口上定义 callMe ：

myFunc=(data)=>{
    console.log(data);
}
window.parent.callMe = myFunc;

示例代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const callIframeFunc = () => {
    window.callMe("Hello");
  };
  return (
    <div className="App">
      <h1>React rel with iframe Demo</h1>
      <iframe
        id="unqiframe"
        title="a"
        srcDoc="<div><script>function myFunc(data){document.getElementsByClassName('testp')[0].innerHTML = 'received data : '+data} window.parent.callMe = myFunc;</script><p class='testp'>No data</p></div>"
        allow="autoplay"
      ></iframe>
      <div>
        <button onClick={callIframeFunc}>Call iFrame Func</button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

DEMO