Chrome不同标签页点击同target的Popup链接打开新窗口的解决办法

问题原因 #

Chrome浏览器中，每个标签页属于独立的浏览上下文，不同标签页的window对象相互隔离。直接使用window.open("popup.html", "myTarget")时，第二个标签页无法识别第一个标签页创建的弹窗引用，因此会新建窗口。

解决方案 #

通过先尝试获取已存在的弹窗引用，再决定是导航到目标页面还是新建弹窗，就能实现复用。

修改后的代码 #

将原链接的点击事件逻辑替换为以下代码：

<a href='javascript: void(0);' onclick='openOrReusePopup();'>open popup</a>

<script>
function openOrReusePopup() {
  // 尝试获取已存在的弹窗（通过target名称）
  let popup = window.open('', 'myTarget');

  if (popup && !popup.closed) {
    // 弹窗存在且未关闭：导航到目标页面、调整大小并前置
    popup.location.href = 'popup.html';
    popup.resizeTo(1000, 750);
    popup.focus();
  } else {
    // 弹窗不存在：新建带参数的弹窗
    popup = window.open('popup.html', 'myTarget', 'width=1000,height=750');
  }
}
</script>

原理说明 #

1. window.open('', 'myTarget')会尝试查找已存在的、target为myTarget的窗口：
   • 如果找到，返回该窗口的引用；
   • 如果没找到，会打开一个空白窗口。
2. 针对找到的弹窗，重新设置其location.href确保页面正确，同时调整大小并将窗口前置；
3. 若弹窗不存在（已被关闭或从未打开），则按原参数新建弹窗。

备选方案（跨标签页通信） #

如果上述方法在某些场景下不生效，可使用Broadcast Channel API实现跨标签页与弹窗的通信，确保能准确复用弹窗：

在popup.html中添加代码：

// 创建广播频道
const popupChannel = new BroadcastChannel('popupReuseChannel');

// 响应主页的弹窗检查请求
popupChannel.onmessage = (event) => {
  if (event.data.type === 'checkPopup') {
    // 通知主页弹窗存在，并将弹窗前置
    popupChannel.postMessage({ type: 'popupExists' });
    window.focus();
  }
};

// 弹窗关闭时发送通知
window.addEventListener('beforeunload', () => {
  popupChannel.postMessage({ type: 'popupClosed' });
});

在home.html中修改代码：

<a href='javascript: void(0);' onclick='openOrReusePopup();'>open popup</a>

<script>
let popupExists = false;
const popupChannel = new BroadcastChannel('popupReuseChannel');

// 监听弹窗的状态通知
popupChannel.onmessage = (event) => {
  if (event.data.type === 'popupExists') {
    popupExists = true;
  } else if (event.data.type === 'popupClosed') {
    popupExists = false;
  }
};

function openOrReusePopup() {
  // 发送检查请求
  popupChannel.postMessage({ type: 'checkPopup' });

  // 等待广播响应后处理
  setTimeout(() => {
    if (!popupExists) {
      window.open('popup.html', 'myTarget', 'width=1000,height=750');
    }
  }, 100);
}
</script>

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