在 vue 3 中通过 `window.open()` 打开子窗口后，因跨域限制无法直接监听其 `beforeunload` 或 `unload` 事件；需借助 `window.opener.postmessage()` 实现安全、可靠的跨域通信来检测子窗口关闭。
在 Vue 3（TypeScript）项目中，当使用 window.open(url, name, config) 打开一个跨域子窗口（如第三方授权页、独立报表页等）时，常见的误区是试图在父组件中直接为 popup 对象绑定 beforeunload 或赋值 onbeforeunload —— 这在跨域场景下完全无效：不仅事件不会触发，且现代浏览器（Chrome/Firefox/Safari）会静默忽略此类跨域监听尝试。
根本原因在于：
✅ popup.addEventListener('beforeunload', ...) 和 popup.onbeforeunload = ... 仅对同源子页面生效；
❌ 一旦子窗口跳转至不同源 URL（如 https://auth.example.com → https://callback.example.net），原监听器即被销毁，且父窗口无权访问子窗口的 document 或 window 生命周期事件。
✅ 正确方案：利用 postMessage 实现跨域关闭通知
该方案分为两部分，双方均需配合实现：
1. 子窗口（最终目标页）注入关闭通知逻辑
确保子窗口的最终加载页面（即用户实际看到并可能关闭的页面）中包含以下脚本（建议放在 <script> 标签内或模块入口处）：</script>
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
<!-- 子窗口最终页面（跨域） -->
<script>
// 监听自身即将卸载（包括关闭、刷新、导航）
window.addEventListener('beforeunload', (e) => {
// 可选：防止意外关闭（仅调试用，生产环境通常移除）
// e.preventDefault();
// e.returnValue = '';
// 向父窗口发送关闭信号（* 表示允许任意源接收，生产环境建议指定 origin）
if (window.opener && !window.opener.closed) {
window.opener.postMessage('popup-closed', '*');
}
});
</script>⚠️ 注意：window.opener 在子窗口整个生命周期中始终有效（即使发生多次跨域跳转），因此无需担心中间重定向导致引用丢失。
2. 父组件（Vue 3 + TypeScript）注册消息监听器
在打开弹窗的 Vue 组件中，提前注册 message 监听器（推荐在 onMounted 中设置，并在 onUnmounted 中清理）：
立即学习“前端免费学习笔记（深入）”；
<script lang="ts">
import { defineComponent, onMounted, onUnmounted } from 'vue'
export default defineComponent({
setup() {
let messageListener: (event: MessageEvent) => void
const onPopupClosed = () => {
console.log('子窗口已关闭，执行清理或回调逻辑')
// ✅ 此处可调用 API、更新状态、重置表单等
}
const openPopup = () => {
const url = 'https://third-party.example.com/auth' // 跨域地址
const name = 'auth-popup'
const config = 'width=600,height=400,menubar=no,toolbar=no'
const popup = window.open(url, name, config)
if (!popup || popup.closed) {
console.warn('弹窗被浏览器拦截')
return
}
popup.focus()
}
onMounted(() => {
messageListener = (event: MessageEvent) => {
// 安全校验：建议生产环境验证 event.origin
if (event.data === 'popup-closed') {
onPopupClosed()
}
}
window.addEventListener('message', messageListener)
})
onUnmounted(() => {
window.removeEventListener('message', messageListener)
})
return { openPopup }
}
})
</script>
<template>
<button @click="openPopup">打开授权弹窗</button>
</template>? 安全增强建议（生产环境必加）
- 替换 postMessage 的 '*' 为明确的 origin（如 'https://third-party.example.com'），并在父组件中校验 event.origin：
if (event.data === 'popup-closed' && event.origin === 'https://third-party.example.com') { onPopupClosed() } - 若子窗口不可控（如纯第三方页面），则无法使用此方案，此时应改用轮询 popup.closed 属性（低效但唯一可行）：
const checkClosed = setInterval(() => { if (popup?.closed) { clearInterval(checkClosed) onPopupClosed() } }, 500)
✅ 总结
跨域子窗口关闭检测的本质不是“监听子窗口”，而是“由子窗口主动通知父窗口”。postMessage 是 Web 平台唯一标准化、安全且广泛支持的跨域窗口通信机制。只要子窗口最终页面可控，该方案即可稳定工作，且兼容所有现代浏览器。
