使用jQuery-Chrome实现关闭子标签页时自动聚焦父标签页

当然可以实现这个需求！Chrome默认会把焦点还给上一个活跃的标签页，而非打开子标签的父页面，但我们可以通过JavaScript的窗口引用和事件监听绕过这个默认行为——不管中间打开了多少其他标签，都能让焦点稳稳回到父页面。

核心思路 #

关键在于保留父窗口与子窗口的双向引用，在子窗口即将关闭时，主动触发父窗口获取焦点。下面分同源和跨域两种场景给出具体实现方案：

场景1：父页面与子页面同源（同一域名/端口） #

这种情况最直接，浏览器允许直接访问window.opener（子窗口指向父窗口的引用）或父窗口保存的子窗口引用。

方法一：父页面主动监听子窗口关闭 #

在父页面打开子标签时，保存子窗口的引用，然后监听子窗口的unload事件，触发父窗口刷新并聚焦：

// 父页面代码
let childTab;

// 绑定到按钮点击等用户交互事件
function openChildTab() {
  // 打开子页面并保存窗口引用
  childTab = window.open('./child.html', '_blank');
  
  // 监听子窗口关闭事件
  childTab.addEventListener('unload', () => {
    // 确保父窗口未被关闭
    if (!window.closed) {
      // 可选：刷新父页面（不需要可删除此行）
      window.location.reload();
      // 强制让父窗口获取焦点
      window.focus();
    }
  });
}

方法二：子页面主动通知父页面聚焦 #

如果子页面有自定义关闭逻辑（比如点击关闭按钮），也可以在子页面中直接调用父窗口的方法：

// 子页面代码
// 监听窗口即将关闭的事件
window.addEventListener('beforeunload', () => {
  // 检查父窗口是否存在且未被关闭
  if (window.opener && !window.opener.closed) {
    // 可选：刷新父页面
    window.opener.location.reload();
    // 让父窗口获取焦点
    window.opener.focus();
  }
});

场景2：父页面与子页面跨域 #

如果父、子页面域名不同，浏览器的同源策略会禁止直接调用window.opener.focus()，这时候需要用postMessage进行跨域通信：

父页面代码（接收消息并处理） #

// 父页面
window.addEventListener('message', (event) => {
  // 验证消息来源（安全起见，替换为你的子页面域名）
  if (event.origin !== 'https://your-child-domain.com') return;
  
  // 收到聚焦指令时执行操作
  if (event.data === 'focusParent') {
    window.location.reload(); // 可选：刷新父页面
    window.focus();
  }
});

子页面代码（发送聚焦指令） #

// 子页面
window.addEventListener('beforeunload', () => {
  if (window.opener && !window.opener.closed) {
    // 向父页面发送消息，指定父页面域名（*表示任意域名，生产环境不推荐）
    window.opener.postMessage('focusParent', 'https://your-parent-domain.com');
  }
});

注意事项 #

1. 浏览器安全限制：大多数现代浏览器要求focus()方法必须由用户主动交互触发（比如点击、按键），所以尽量把打开子标签和监听事件的逻辑放在用户操作的回调中（比如按钮点击事件），避免页面加载时自动执行导致focus()失效。
2. 窗口引用失效：如果用户手动关闭父页面，或者子页面被浏览器强制销毁，window.opener或父页面保存的子窗口引用会变成null，一定要加if判断确保引用有效。
3. 调试提示：在开发者工具中调试时，浏览器的焦点行为可能和正常窗口不同，建议在普通浏览器窗口中测试效果。

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