Vue.js 3中如何为跨源子窗口正确添加关闭事件监听器？

跨源地址重定向后，父窗口无法监听子窗口的beforeunload事件，这是浏览器同源策略的限制——子窗口跳转至不同域名后，父窗口与子窗口的上下文完全隔离，原有的事件绑定会直接失效。

可行的替代方案是轮询检测弹窗的closed属性，浏览器允许父窗口访问自身创建的弹窗对象的closed状态，即使弹窗已跨源。

以下是适配Vue3 + TypeScript的修改代码：

方案一：Composition API写法 #

<template>
    ...
    <button @click="onPositive">打开弹窗</button>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue';

export default defineComponent({
    setup() {
        let popupTimer: number | null = null;

        const onPopupClosed = () => {
            console.log('弹窗已关闭');
            // 这里执行你的业务逻辑
        };

        const onPositive = () => {
            const url = '你的跨源地址';
            const name = 'popupWindow';
            const config = 'width=600,height=400';

            const popup = window.open(url, name, config) as Window | null;
            if (!popup) {
                console.error('弹窗被浏览器拦截');
                return;
            }
            popup.focus();

            // 启动轮询检测
            popupTimer = window.setInterval(() => {
                if (popup.closed) {
                    onPopupClosed();
                    popupTimer && clearInterval(popupTimer);
                    popupTimer = null;
                }
            }, 500); // 每500ms检测一次，可按需调整间隔
        };

        // 组件卸载时清理定时器，避免内存泄漏
        onUnmounted(() => {
            popupTimer && clearInterval(popupTimer);
        });

        return {
            onPositive
        };
    }
});
</script>

方案二：Options API写法 #

<template>
    ...
    <button @click="onPositive">打开弹窗</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    data() {
        return {
            popupTimer: null as number | null
        };
    },
    methods: {
        onPopupClosed() {
            console.log('弹窗已关闭');
            // 业务逻辑处理
        },
        onPositive() {
            const url = '你的跨源地址';
            const name = 'popupWindow';
            const config = 'width=600,height=400';

            const popup = window.open(url, name, config) as Window | null;
            if (!popup) {
                console.error('弹窗被浏览器拦截');
                return;
            }
            popup.focus();

            this.popupTimer = window.setInterval(() => {
                if (popup.closed) {
                    this.onPopupClosed();
                    this.popupTimer && clearInterval(this.popupTimer);
                    this.popupTimer = null;
                }
            }, 500);
        }
    },
    unmounted() {
        this.popupTimer && clearInterval(this.popupTimer);
    }
});
</script>

关键注意事项 #

• 处理弹窗拦截：window.open可能因浏览器安全策略返回null，必须添加拦截提示或 fallback 逻辑。
• 定时器清理：组件卸载或弹窗关闭后，务必清除定时器，防止内存泄漏。
• 轮询间隔：根据业务需求调整，500ms是兼顾性能与响应速度的均衡选择，间隔过短会增加性能消耗，过长会导致关闭事件触发延迟。

内容的提问来源于stack exchange，提问作者Sooraj S Prakash