如何通过JavaScript在同源环境下程序化切换到指定Chrome浏览器标签页

这是个很常见的多标签页交互需求，我来给你拆解几个可行的方案，都是基于同源场景的：

方案一：保留窗口引用直接聚焦（最直接） #

当你第一次打开tab_1的时候，一定要保存window.open返回的窗口对象，同时给这个窗口指定一个固定的自定义名称（别用_blank，不然每次会新开标签）。这样后续在同源的其他标签页里，就能直接调用这个对象的focus()方法切换焦点。

示例代码：

// 在初始页面打开tab_1时，保存窗口引用
const tab1Window = window.open("www.example.com/{data}", "targetTab1");

// 之后在tab_4的提交按钮点击事件里，先聚焦tab_1再关闭当前页
document.querySelector('#submitBtn').addEventListener('click', () => {
  // 先执行你的提交逻辑...
  
  // 检查tab_1是否还没关闭，然后聚焦
  if (tab1Window && !tab1Window.closed) {
    tab1Window.focus();
  }
  // 关闭当前tab_4
  window.close();
});

方案二：利用窗口名称找回并聚焦（应对页面刷新） #

如果初始页面（打开tab_1的页面）刷新了，之前保存的窗口引用会丢失。这时候你可以利用之前给tab_1指定的固定名称，通过window.open传入空URL和该名称，浏览器会自动找到已打开的对应窗口并返回引用，然后再聚焦。

示例代码（在tab_4中执行）：

document.querySelector('#submitBtn').addEventListener('click', () => {
  // 提交逻辑...
  
  // 通过窗口名称获取tab_1的引用
  const tab1Window = window.open("", "targetTab1");
  if (tab1Window) {
    tab1Window.focus();
  }
  window.close();
});

注意：这里的空URL不会让tab_1跳转，只是用来获取已存在的窗口引用。

方案三：本地存储信号触发聚焦（极端情况兜底） #

如果上面两种方法都因为浏览器限制失效（比如某些浏览器对非用户触发的focus操作有拦截），可以用本地存储传递信号，让tab_1自己主动获取焦点。

步骤如下：

1. 在tab_4关闭前，往localStorage里写入一个触发标记
2. 在tab_1的页面中监听storage事件，收到标记后调用window.focus()

示例代码：

• tab_4中的提交逻辑：

document.querySelector('#submitBtn').addEventListener('click', () => {
  // 提交操作...
  
  localStorage.setItem('needFocusTab1', 'true');
  window.close();
});

• tab_1中的监听逻辑：

window.addEventListener('storage', (event) => {
  if (event.key === 'needFocusTab1' && event.newValue === 'true') {
    window.focus();
    // 清除标记，避免重复触发
    localStorage.removeItem('needFocusTab1');
  }
});

关键注意事项 #

• 同源限制：所有标签页必须是同源的（协议、域名、端口都一致），否则浏览器的跨域安全策略会阻止你访问其他窗口的引用或监听storage事件。
• 用户触发限制：浏览器会阻止非用户主动触发的focus操作（比如定时器里的focus），所以一定要把聚焦代码放在用户点击按钮的事件回调内，和window.close()一起执行。

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