多子域名链接同基础URL窗口复用逻辑及JS代码问题排查

需求说明 #

针对包含多子域名的URL链接列表，需实现以下交互逻辑：

• 首次点击某子域名链接时，在新标签页打开
• 后续点击同子域名链接时，复用已打开的对应标签页；点击不同子域名链接时，打开新标签页

原代码的问题分析 #

你提供的代码存在3个核心问题，导致无法在所有场景下正常工作：

1. 窗口参数使用错误：window.open(url, existingTab) 的第二个参数需要是字符串类型的窗口名称，而非直接传入window.open返回的Tab对象，这会导致复用标签页的逻辑失效。
2. 子域名提取逻辑缺陷：原正则只能匹配最外层的单级子域名，无法处理a.b.example.com这类多级子域名，也会误处理无前缀的主域名（如example.com）。
3. 未处理标签页关闭场景：用户手动关闭标签页后，openTabs中的引用仍会保留，后续点击同子域名链接时会尝试复用已关闭的标签页，引发异常。

修正后的解决方案 #

// 存储子域名对应的窗口名称与标签页对象
const openTabs = {};

// 处理链接点击事件
function handleClick(event) {
  event.preventDefault();
  const url = event.target.href;
  const subdomain = getSubdomain(new URL(url));
  
  if (openTabs[subdomain]) {
    const { tabName } = openTabs[subdomain];
    // 尝试复用对应子域名的标签页
    const reusedTab = window.open(url, tabName);
    // 若标签页已被关闭，重新创建并更新记录
    if (!reusedTab || reusedTab.closed) {
      const newTab = window.open(url);
      openTabs[subdomain] = {
        tabName: `tab-${subdomain}`,
        tab: newTab
      };
      // 监听标签页关闭事件，自动清理记录
      newTab.addEventListener('beforeunload', () => delete openTabs[subdomain]);
    } else {
      // 聚焦到已打开的标签页，提升用户体验
      reusedTab.focus();
    }
  } else {
    // 首次打开子域名链接，用子域名作为窗口名称
    const tabName = `tab-${subdomain}`;
    const newTab = window.open(url, tabName);
    openTabs[subdomain] = {
      tabName,
      tab: newTab
    };
    // 监听标签页关闭，清理记录
    newTab.addEventListener('beforeunload', () => delete openTabs[subdomain]);
  }
}

// 正确提取子域名（支持多级子域名与各类主域名后缀）
function getSubdomain(urlObj) {
  const hostnameParts = urlObj.hostname.split('.');
  // 可根据业务需求扩展顶级域名列表
  const commonTLDs = ['com', 'net', 'org', 'io', 'co.uk', 'com.au', 'gov.cn'];
  let subdomain = '';

  if (hostnameParts.length >= 2) {
    const possibleTLD = hostnameParts.slice(-2).join('.');
    // 判断是否为双后缀顶级域名（如co.uk）
    if (commonTLDs.includes(possibleTLD)) {
      subdomain = hostnameParts.slice(0, -2).join('.');
    } else {
      subdomain = hostnameParts.slice(0, -1).join('.');
    }
  }

  // 若无子域名，直接返回主域名作为标识
  return subdomain || urlObj.hostname;
}

// 为页面所有链接绑定点击事件
document.querySelectorAll('a').forEach(link => {
  link.addEventListener('click', handleClick);
});

关键改进点 #

• 规范窗口名称：用tab-${subdomain}作为窗口名称，确保window.open能精准复用对应子域名的标签页。
• 优化子域名提取：使用浏览器原生URL API解析域名，结合自定义顶级域名列表，正确识别多级子域名与各类主域名。
• 自动清理无效记录：绑定beforeunload事件，在用户关闭标签页时自动删除openTabs中的对应记录，避免无效复用。
• 异常场景处理：检查复用的标签页状态，若已关闭则重新创建，同时自动聚焦到已打开的标签页，提升交互体验。

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