postMessage

postMessage"/>

postMessage

A:端口3000

import React, { useEffect } from 'react';function App() {useEffect(() => {const childWindow = document.getElementById('child').contentWindow;const sendMessageToChild = () => {childWindow.postMessage("主页面消息", "http://localhost:4000");};const receiveMessageFromChild = (event) => {if (event.origin === "http://localhost:4000" && typeof event.data === "string") {console.log(event);const messageElement = document.getElementById('message');if (messageElement) {messageElement.innerHTML = `收到 ${event.origin} 消息：${event.data}`;}event.source.postMessage("主页面收到消息并回复", event.origin);}};window.addEventListener('message', receiveMessageFromChild, false);sendMessageToChild();return () => {window.removeEventListener('message', receiveMessageFromChild);};}, []);return (<div className="App"><iframe id="child" src="http://localhost:4000"></iframe><div><h2>主页面跨域接收消息区域</h2><div id="message"></div></div></div>);
}export default App;

B:端口4000

import React, { useEffect } from 'react';function App() {useEffect(() => {const parentWindow = window.parent;const sendMessageToParent = () => {parentWindow.postMessage("子页面消息收到", 'http://localhost:3000');};const receiveMessageFromParent = (event) => {if (event.origin === "http://localhost:3000" && typeof event.data === "string") {console.log(event);const messageElement = document.getElementById('message');if (messageElement) {messageElement.innerHTML = `收到 ${event.origin} 消息：${event.data}`;}event.source.postMessage("子页面收到消息并回复", event.origin);}};window.addEventListener('message', receiveMessageFromParent, false);sendMessageToParent();return () => {window.removeEventListener('message', receiveMessageFromParent);};}, []);return (<div className="App">hello world<div id="message"></div></div>);
}export default App;