在 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. 子窗口（最终目标页）注入关闭通知逻辑
确保子窗口的最终加载页面（即用户实际看到并可能关闭的页面）中包含以下脚本（建议放在
⚠️ 注意：window.opener 在子窗口整个生命周期中始终有效（即使发生多次跨域跳转），因此无需担心中间重定向导致引用丢失。
2. 父组件（Vue 3 + TypeScript）注册消息监听器
在打开弹窗的 Vue 组件中，提前注册 message 监听器（推荐在 onMounted 中设置，并在 onUnmounted 中清理）：
立即学习“前端免费学习笔记（深入）”；
? 安全增强建议（生产环境必加）
- 替换 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 平台唯一标准化、安全且广泛支持的跨域窗口通信机制。只要子窗口最终页面可控，该方案即可稳定工作，且兼容所有现代浏览器。
