如何解决在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 举报,一经查实,本站将立刻删除。