如何在window.open打开的子窗口刷新或跳转时自动关闭它？

问题根源 #

你之前的代码失效，核心原因有两点：

1. 子窗口跳转或刷新后，父窗口绑定的popout.onbeforeunload事件会因为页面上下文被替换而失效；
2. 在子窗口的beforeunload事件中直接调用popout.close()，可能被浏览器的安全策略拦截。

可行解决方案 #

方案1：给子窗口注入自监听脚本 #

让子窗口自身监听卸载事件并执行关闭逻辑，这样即使页面刷新，只要是同源页面，监听逻辑就能生效。

const popout = window.open('', '', 'popout');

// 等待子窗口加载完成后注入脚本
popout.onload = () => {
  const script = popout.document.createElement('script');
  script.textContent = `
    // 监听beforeunload事件，触发时关闭窗口
    window.addEventListener('beforeunload', () => window.close());
    // 兼容部分浏览器，补充unload事件监听
    window.addEventListener('unload', () => window.close());
  `;
  popout.document.body.appendChild(script);
};

方案2：父窗口轮询检测子窗口状态（兼容跨域场景） #

如果子窗口会跳转到跨域页面，注入脚本的方法会失效，此时可以通过父窗口定时检测子窗口的URL变化，或捕获跨域错误来触发关闭。

const popout = window.open('', '', 'popout');
const initialUrl = popout.location.href;

// 每隔500ms检测一次子窗口状态
const checkTimer = setInterval(() => {
  try {
    // 非初始URL则关闭窗口并清理定时器
    if (popout.location.href !== initialUrl) {
      popout.close();
      clearInterval(checkTimer);
    }
  } catch (err) {
    // 捕获跨域错误，说明子窗口跳转到外部域名，直接关闭
    popout.close();
    clearInterval(checkTimer);
  }
}, 500);

// 父窗口卸载时清理定时器
window.onbeforeunload = () => clearInterval(checkTimer);

关键注意点 #

• 确保window.open是在用户主动操作（如点击事件）中触发，避免被浏览器弹窗拦截；
• 跨域场景下，父窗口无法直接访问子窗口的DOM或location，只能通过捕获错误的方式判断跳转行为。

内容的提问来源于stack exchange，提问作者spaceman