本文介绍如何可靠检测由 window.open() 创建的弹出窗口（新标签页）的生命周期状态，包括关闭、刷新和失活，并提供可立即使用的轮询与事件监听结合方案。
本文介绍如何可靠检测由 `window.open()` 创建的弹出窗口（新标签页）的生命周期状态，包括关闭、刷新和失活，并提供可立即使用的轮询与事件监听结合方案。
在 Web 开发中，使用 window.open() 打开新窗口（或标签页）后，常需感知其状态变化——例如用户主动关闭、手动刷新、或浏览器进程意外终止。但需注意：跨源限制（CORS）和现代浏览器策略（如弹出窗口拦截、标签页沙箱化）会显著影响检测能力。若新窗口打开的是同源 URL（如 about:blank 或当前域下的页面），则可通过以下方式安全检测；若跳转至跨源地址（如 https://example.com），则 newWindow.closed 仍可读取，但无法访问其 document 或绑定事件。
✅ 推荐方案：轮询 + closed 属性 + beforeunload 双保险
newWindow.closed 是最可靠、无副作用的原生属性：当窗口被关闭或完全卸载（含刷新）后，该值立即变为 true（注意：刷新时旧实例销毁，closed 立即为 true；新页面加载属于全新上下文，无法继承原引用）。因此，应持续轮询该属性：
const newWindow = window.open(
"about:blank",
"_blank",
"width=800,height=600,left=2000,top=0"
);
if (!newWindow || newWindow.closed) {
console.error("弹出窗口被拦截或打开失败");
return;
}
// 向新窗口写入内容（仅限同源）
newWindow.document.write(`
<div id="content">${escapeHtml(document.getElementById(`slide-${slideIndex}`).innerHTML)}</div>
`);
newWindow.document.close();
// 检测窗口是否已关闭/刷新
let isAlive = true;
const checkInterval = setInterval(() => {
if (newWindow.closed) {
if (isAlive) {
console.log("⚠️ 新窗口已关闭或刷新");
// ✅ 此处调用你的 API
fetch("/api/window-closed", { method: "POST", body: JSON.stringify({ slideIndex }) })
.catch(err => console.warn("API 调用失败:", err));
isAlive = false;
}
}
}, 500); // 建议 300–1000ms，兼顾及时性与性能
// 清理：父页面卸载时清除定时器
window.addEventListener("beforeunload", () => {
clearInterval(checkInterval);
});
? 关键说明：
newWindow.closed在窗口刷新瞬间即返回true（因旧 JS 上下文销毁），无需依赖子窗口自身事件。这是比监听beforeunload更健壮的方式——后者需在子窗口内注入脚本，且跨源时完全不可用。
⚠️ 注意事项与边界情况
-
跨源限制：若
newWindow加载了跨源页面，你无法向其document.write()或读取location，但newWindow.closed仍可安全访问。 -
弹出拦截：
window.open()可能返回null（用户禁用弹窗或非用户手势触发），务必前置校验。 -
移动端兼容性：iOS Safari 对
window.open()行为受限（常强制在当前标签页打开），closed检测逻辑依然有效，但体验可能降级。 -
避免内存泄漏：务必在父页面卸载或窗口确认关闭后
clearInterval，并置空引用（如newWindow = null）。
✅ 进阶建议：子窗口主动通知（同源场景）
若新窗口可控（如跳转至你自己的 /popup.html），可在其中添加主动上报逻辑，提升实时性：
<!-- popup.html 中 -->
<script>
window.addEventListener("beforeunload", () => {
// 主动通知父窗口（需同源）
if (window.opener && !window.opener.closed) {
window.opener.postMessage({ type: "POPUP_UNLOAD" }, "*");
}
});
</script>
父页面监听：
window.addEventListener("message", (e) => {
if (e.data.type === "POPUP_UNLOAD") {
console.log("收到子窗口主动卸载通知");
// 调用 API...
}
});
综上，以 newWindow.closed 轮询为核心，辅以 beforeunload 清理和（同源时）postMessage 主动通知，是目前最稳定、兼容性最佳的检测方案。切勿依赖 window.focus/blur 或 visibilitychange，它们无法区分关闭与最小化，也无法捕获刷新事件。
