无法在反应组件中使用 postMessage

Question

我试图打开一个弹出窗口并从反应组件传递一条消息，窗口打开（http://localhost:3001）但未显示消息。下面是打开popup和postMessage到弹出窗口的代码：

  React.useEffect(() => {
    document.addEventListener("message", function(event) {
      console.log('event data', event.data, event.source);
    })
  }, []);

  const onAdd = () => {
    const popup = window.open('http://localhost:3001/auth', 'authWindow','height=500,width=500');
    popup.postMessage('data', 'http://localhost:3001');
  }

在那个弹出窗口（http://localhost:3001/）打开我想向我的父窗口（http://localhost:3000/）传递一条消息，这是向父窗口传递消息的代码：

  const receiveMessage = (e) => {
    console.log("message event",  e.data);

    e.source.postMessage("message: asasdas", 'http://localhost:3000')
    // if (event.origin !== "http://localhost:3000")
    //   return;
  }

  React.useEffect(() => {
    window.addEventListener("message", receiveMessage);
  }, [])

但这也给出了一个错误： Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3000') does not match the recipient window's origin ('http://localhost:3001').

Answer 1

使用BroadcastChannel API。我在我的项目中使用它并发现它更可靠。我没有看到你遇到的问题。

Broadcast Channel