react 嵌套iframe_React嵌套iframe,使用postMassage进行交互

React嵌套iframe时，可以使用postMessage进行iframe内外的交互。下面是一个简单的示例：

在父组件中嵌入iframe：

function ParentComponent() {
  const handleIframeMessage = (event) => {
    console.log(event.data);
  };

  useEffect(() => {
    window.addEventListener("message", handleIframeMessage);

    return () => {
      window.removeEventListener("message", handleIframeMessage);
    };
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <iframe src="https://example.com" />
    </div>
  );
}

在子组件中发送消息：

function ChildComponent() {
  const sendMessageToParent = () => {
    window.parent.postMessage("Hello, Parent!", "*");
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={sendMessageToParent}>Send Message to Parent</button>
    </div>
  );
}

当点击“Send Message to Parent”按钮时，会向父组件发送消息。在父组件中，我们可以监听window的“message”事件，处理来自子组件的消息。

注意：在实际使用中，应该使用精确的目标源(origin)，而不是通配符(*)。