刷新源页面后，复用已打开标签页打开URL失效的解决方案求助

我实现了在同一标签页打开多个URL的功能，初次使用正常，但刷新打开新标签页的源页面后，点击链接会打开新标签页而非复用旧标签页，求解决办法。

原实现代码 #

window.currentChild = false;

function openInTab($elm) {
    if (currentChild) currentChild.close();
    const child = window.open($elm.attr("href")+new Date(), "myWindowName", '');
    currentChild = child;

    // 在子窗口中运行的脚本
    child.frames.eval(`
    setInterval(function () {
        if (!window.opener.currentChild)
          window.opener.currentChild = window;
    }, 500);
  `);
  return false;
}

测试场景 #

场景1（正常流程） #

• 点击Open In Tab链接，打开新标签页
• 再次点击Open In Tab链接，关闭之前的标签页并打开新标签页

场景2（刷新后异常） #

• 点击Open In Tab链接，打开新标签页
• 再次点击Open In Tab链接，关闭之前的标签页并打开新标签页
• 刷新源页面
• 点击Open In Tab链接，打开新标签页（预期：关闭之前的标签页）

尝试的替代方案 #

尝试直接复用名为myWindowName的标签页，但刷新源页面后问题依旧：

function OpenOnce($elm){
  var existingChildWindow = window.open($elm.attr("href")+new Date(), "myWindowName",'');

  if (existingChildWindow && !existingChildWindow.closed) {
      existingChildWindow.focus(); 
  }

  return false;
}

解决办法 #

核心问题 #

刷新源页面后，原页面的全局变量会被重置，且新页面实例无法获取到之前页面打开的窗口引用——浏览器的窗口引用仅在当前页面生命周期内有效，页面刷新后旧引用直接失效。

同源场景（目标URL与源页面同源） #

如果目标页面和源页面属于同一域名，可以直接获取窗口引用并控制关闭：

function openInTab($elm) {
  // 尝试获取已打开的同名窗口
  let childWindow = window.open('', 'myWindowName');
  
  if (childWindow && !childWindow.closed) {
    // 窗口存在则关闭
    childWindow.close();
  }
  
  // 打开新窗口
  childWindow = window.open($elm.attr("href") + new Date(), "myWindowName");
  
  return false;
}

跨域场景（目标URL与源页面不同源） #

受浏览器同源策略限制，跨域时无法直接访问窗口的closed属性或调用close()方法，此时可改为直接复用标签页加载新URL：

function openInTab($elm) {
  // 强制复用同名标签页，直接加载新地址
  const childWindow = window.open($elm.attr("href") + new Date(), "myWindowName");
  
  if (childWindow) {
    childWindow.focus();
  }
  
  return false;
}

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