Question

我已根据link指南使用Node.js和React创建Shopify应用。

某些按钮具有在新选项卡中打开新窗口的功能。我需要将数据从打开的选项卡传递到打开器，在React组件中捕获并使用这些数据。

我尝试使用广播频道API使其成功。

在react组件中，我创建了频道：

const channel = new BroadcastChannel('my_channel');

并添加了侦听器：

channel.onmessage = function (ev) { console.log(ev); }

在新标签中的代码中，我尝试加入此标签并发送消息。

const channel = new BroadcastChannel('my_channel');
channel.postMessage('This is a test message.');

但是，当我尝试在react组件中使用此侦听器时，未捕获此事件。

打开窗口并初始化侦听器：

  const handleOpen = (page) => () => {
    const newWin = window.open(`{domen}/${page}?s=true&type=${type}`, '_blank');
    const channel = new BroadcastChannel('my_channel');

    channel.onmessage = function(ev) {
      console.log(ev);
    };

    setSelectedWindow(newWin);
  };


  const handleClose = () => {
    setSelectedWindow(null);
    channel.close()
  };

从新标签发送消息：

   const channel = new BroadcastChannel('my_channel');
   channel.postMessage('This is a test message.');

我希望React组件中的侦听器必须捕获此消息，但是对此没有任何反应！

有什么想法吗？

如何从React组件中打开的窗口中捕获“消息”事件？

0 个答案: