在NextJS中通过window.postMessage获取跨窗口消息错误

问题描述

在Checkout卡付款提供商完成3D安全授权后，我需要与重定向页面进行通信。因为我不想更改“父窗口”的位置，所以我有这样的设置

/payment.tsx

这是一个打开3DS Auth URL的新窗口的页面

export default function IndexPage() {
    useEffect(() => {
        //redirect will be replaced by 3d secure url
        // which after 3ds completes will redirect to /redirect
        const redirectwindow = window.open('/redirect')

        //I assume message posted by /redirect will be recieved here
        window.addEventListener('message',(event) => {
            //  if (typeof event.data === 'object' && 'key' in event.data) {
            if (typeof event.data === 'object' && 'key' in event.data && event.data.key === 'redirect') {
                console.log(event.data,'Received From Redirect Window')
                redirectwindow?.close()
            }
        })
    },[])

    return <div>Waiting for Redirect to send message</div>
}

下一页 /重定向是成功或失败后3DS返回的位置

import { useEffect } from 'react'

export default () => {
    useEffect(() => {
        window.addEventListener('message',(event) => {
            console.log(event)
            event.source?.postMessage({ key: 'redirect',message: 'Hi' },'*')
            //}
        })
    },[])
    return <div>Transaction Successfull I should be closed by my Parent Window</div>
}

这样做的目的是通过在Checkout 3DS完成并返回到应用程序后向/ payment发送消息来关闭/ redirect窗口。此设置可能不是可行的方法，因此欢迎您提供反馈。但是目前，我无法从/ redirect发送任何消息，因此无法关闭窗口。

示例代码可在CodeSandbox

中找到

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

checkout reactjs reactjs