从打开的 window 传递数据

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 的建议，我终于明白了，我意识到我实施错误了。我将在此处提供它以防万一它会帮助遇到此问题的任何人 post.

对于客户端的 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) 在 windows 之间进行通信。在子 window 中，您可以将父 window 引用为 window.opener 以发布消息，在父 window 中，您可以将 popupWindow 用于发布

从打开的 window 传递数据

Passing data from opened window

node.js

reactjs

express

oauth

window.open