javascript - 在 React 中使用 EventListener 和 postMessage 从弹出窗口传递数据

Question

我正在处理 oAuth 登录，它工作正常，但重定向到授权和响应的整个过程都发生在同一页面上。 我想要做的是在弹出窗口中打开它。

为了实现这一点，我必须在父页面中添加一个 EventListener(例如，“使用 github 连接”按钮所在的位置)。这是代码:

let popup = window.open(window.location.origin+`/socialProcess?site=github`, width=600, height=600);
popup.addEventListener("message", (response) => {
        if (response.origin !== window.location.origin) {
            return;
        }
        let data = response.data;
        if (data.success) {
            alert(this.state.userName + " account accessed successfully");
        }
    }, false);

在通过路径 /socialProcess 加载的子页面中，我首先将弹出页面重新加载到社交网络 oAuth url，在授权过程之后，响应 URI 返回到 /socialProcess(所有发生在同一个弹出窗口中)。 使用接收到的数据(在处理它之后)，然后我尝试以 3 种不同的方式将它发送到父监听器函数，如下所示:

window.opener.postMessage({success: this.state.success}, this.state.page);
window.postMessage({success: this.state.success}, this.state.page);
parent.postMessage({success: this.state.success}, this.state.page);

但是好像没有触发监听器的功能。

我认为问题出在加载社交 oauth 页面然后加载响应 URI 时弹出页面自动重新加载。 因为如果我在重新加载之前添加 window.postMessage({success: true}, this.state.page); 我的父页面获取数据。

最让我困惑的是，如果我在 postMessage 下添加 window.opener.location.reload();(弹出窗口重新加载后)，我的父页面会重新加载，这意味着它确实记得谁打开了它，那么为什么 window.opener.postMessage({success: this.state.success}, this.state.page); 不起作用？当弹出窗口重新加载时，监听器是否就死了？

我做错了什么？还有其他方法吗？ 谢谢!

Answer 1

我能够解决我的问题。 首先是正确的 postMessage:window.postMessage。

在我的示例中，我传递了 window.postMessage({success: this.state.success}, this.state.page); this.state.page 值必须是字符串，因为监听器期望收到“消息”。

这意味着我必须使用 Json stringify 将任何对象转换为字符串。

这样做并将我的值作为字符串传递(然后解析它)解决了我的问题。