从打开的窗口传递数据

Question

我已经被这个问题困扰了一天，想知道是否有办法解决这个问题。

客户端

客户端将是动态的，因为它是一个应用类型的插件。 客户端将为 oAuth 目的打开一个弹出窗口。假设它的域是www.google.com 我在 ReactJS 中有类似 window.open('www.backend.com/api') 的弹出窗口。

客户端按钮是这样的：

<button onClick={() => iveBeenClicked()}> sync up </button>

然后它运行这个函数

const iveBeenClicked = (e) => {
e.preventDefault()
const popupWindow = window.open('www.backend.com/api', "_blank")

}

oAuth 和 ExpressJS 的后端

这是后端，我们会说是www.backend.com/api

router.use("/api", (req, res) => {

  if (req.query.code) {
   res.send(res.query.code)
  } else {
    res.redirect(
      `www.ApiRouteThatRedirectsWhenComplete.com`
    );
  }
});

好吧，我有我想要的代码，但我如何将它从不同的域发送到客户端？如果有用户可以按接受的window.open() 的替代方法，请告诉我。

所以最大的问题是，客户端如何从 window.open 的弹出窗口接收数据？

提前谢谢你！

#编辑

多亏了@vishal-bartakke 的建议，我终于得到了它，我意识到我实施错了。我将在此处提供它以防万一它对遇到此帖子的任何人有所帮助。

对于客户端的 ivebeenclicked() 函数：

const iveBeenClicked = (e) => {
e.preventDefault()
const popupWindow = window.open('www.backend.com/api', "_blank")

//this is the part that was needed to receive the information of success
window.addEventListener('message', (e) => {
if (e.data) {
//do what you need to do with that key
}
})
}

在我的 expressjs 文件中：

router.use(['/api/', '/api/page?'], (req, res) => {

  if (req.query.token) {
    res.sendFile(path.join(__dirname +'/thatHTMLpage.html'))
  } else {
    res.redirect(`that route that does the oauth`)
  }
})

在成功创建的 html 中，我添加了此代码以发送数据

      window.onload = function () {
        let urlParams = new URLSearchParams(window.location.search);
        window.opener.postMessage(urlParams.get("code"), "*");
      };

这是一个相当混乱的设置，但它可以按照我想要的方式工作。 谢谢！

Answer 1

您可以使用 postMessage (check here) 在窗口之间进行通信。在子窗口中，您可以将父窗口称为window.opener 用于发布消息，在父窗口中您可以将popupWindow 用于发布