前端开启新窗口进行简单交互

最新推荐文章于 2024-01-10 11:12:23 发布

开心羊羊

最新推荐文章于 2024-01-10 11:12:23 发布

阅读量113

点赞数

文章标签：前端交互 vue.js

本文链接：https://blog.csdn.net/weixin_50622621/article/details/135091172

版权

两窗口需要同源才能交互

data() {
        return {
            windowInformation: null, //新窗口信息
            newWindowTimer: null //获取新窗口关闭信息定时器
        }
    },
methods: {
async getPurchaseAuthUrlFn(type) {
let { authUrl } = await xxxxxxxx()
            const windowWidth = window.innerWidth
                    const windowHeight = window.outerHeight
                    const windowFeatures = `left=${windowWidth / 2 - 600 / 2},top=${windowHeight / 2 - 700 / 2},width=600,height=700`
this.windowInformation = window.open(authUrl, `AuthorizationTransferPage`, windowFeatures)
                        window.removeEventListener('message', this.receiverFunction)
                        if (this.newWindowTimer) {
                            clearInterval(this.newWindowTimer)
                            this.newWindowTimer = null
                        }
                        window.addEventListener('message', this.receiverFunction)
                        this.newWindowTimer = setInterval(() => {
                            if (this.windowInformation.closed) {
                                window.removeEventListener('message', this.receiverFunction)
                                if (this.newWindowTimer) {
                                    clearInterval(this.newWindowTimer)
                                    this.newWindowTimer = null
                                }
                                this.$message.warning('手动关闭！')
                            }
                        }, 100)
        },
        receiverFunction(event) {
            // 确保消息来自可信任的源
            let pattern = /^(http|https):\/\/[a-z0-9.]*(xxxxxxxx.com)$/
            if (pattern.test(event.origin)) {
                // 处理消息内容
                // console.log('接收到的消息: ', event)
                // 在这里执行你的操作
                if (event.data === '授权成功') {
                    window.removeEventListener('message', this.receiverFunction)
                    if (this.newWindowTimer) {
                        clearInterval(this.newWindowTimer)
                        this.newWindowTimer = null
                    }
                    this.windowInformation?.close()
                    this.$message.success('授权成功！')
                } else if (event.data === '手动关闭') {
                    this.$message.warning('手动关闭！')
                }
            }
        }
    }
beforeDestroy() {
        window.removeEventListener('message', this.receiverFunction)
        if (this.newWindowTimer) {
            clearInterval(this.newWindowTimer)
            this.newWindowTimer = null
        }
    }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>授权中转页</title>
</head>
<body>
  <h1>授权成功</h1>
<script>
    window.onload = function(event) {
      window.opener.postMessage('授权成功', window.opener.location.href)
    }
    window.onunload = function(event) {
      window.opener.postMessage('手动关闭', window.opener.location.href)
    }
</script>
</body>
</html>