如何在新标签页打开外部链接，跳转至原生APP时自动关闭该标签页

我正在开发一个JavaScript函数，用于在新标签页打开外部链接。但需要实现：当用户通过Deep Linking跳转至原生移动应用时，自动关闭该标签页。

当前代码：

export const openExternalLink = (url: string) => {
  const newTab = window.open(url, '_blank');

  // Check if the new tab was opened but it is empty due to deep linking redirecting to native related app then close it
  if (newTab) {
    // Close the tab if it is empty (native app redirect)
  }
};

问题点：用户点击链接后，新标签页会打开该外部链接，但如果设备支持Deep Linking并跳转至原生APP，该标签页会处于空白或未加载状态却仍保持打开。

已尝试方案：

• 通过检查newTab的内容判断是否加载完成，但无法确定是否发生了跳转；
• 尝试使用newTab.close()，但不确定是否存在可靠的检测跳转至APP的时机。

需求：寻求一个可靠的解决方案，能够检测外部链接何时跳转至原生APP，并自动关闭对应的标签页。

受浏览器同源策略限制，直接检测新标签页是否触发Deep Link跳转存在局限性，但可以通过以下几种方案实现需求：

1. 页面可见性API + 定时器检测 #

当Deep Link唤起原生APP时，新标签页会被切换到后台，此时可结合页面可见性状态和加载状态判断：

export const openExternalLink = (url: string) => {
  const newTab = window.open(url, '_blank');
  if (!newTab) return;

  const checkAndClose = () => {
    // 标签页被隐藏且未完成加载，说明大概率唤起了APP
    if (newTab.document.hidden && newTab.document.readyState !== 'complete') {
      newTab.close();
      clearInterval(intervalId);
    }
    // 页面加载完成，说明未触发APP跳转，停止检测
    if (newTab.document.readyState === 'complete') {
      clearInterval(intervalId);
    }
  };

  // 每隔500ms检测一次，持续3秒（可根据实际场景调整时长）
  const intervalId = setInterval(checkAndClose, 500);
  setTimeout(() => clearInterval(intervalId), 3000);
};

该方案依赖现代移动端浏览器对页面可见性API的支持，兼容性较好。

2. 监听beforeunload事件（有限场景有效） #

如果Deep Link的URL会触发页面beforeunload事件（比如存在中转跳转逻辑），可通过该事件辅助判断：

export const openExternalLink = (url: string) => {
  const newTab = window.open(url, '_blank');
  if (!newTab) return;

  let isUnloaded = false;
  newTab.addEventListener('beforeunload', () => {
    isUnloaded = true;
  });

  setTimeout(() => {
    // 未触发卸载且未完成加载，说明可能唤起了APP
    if (!isUnloaded && newTab.document.readyState !== 'complete') {
      newTab.close();
    }
  }, 2000);
};

此方案对直接通过URL唤起APP的场景效果有限，适合带中转页的Deep Link场景。

3. 自定义中转页（最可靠方案） #

如果能控制跳转逻辑，自定义中转页是最精准的实现方式：

1. 中转页尝试唤起原生APP；
2. 设置定时器，若指定时间内未检测到页面被隐藏，则跳转到网页版；
3. 成功唤起APP后自动关闭标签页。

示例中转页（redirect.html）代码：

<!DOCTYPE html>
<html>
<body>
  <script>
    const params = new URLSearchParams(window.location.search);
    const webUrl = params.get('url');
    const deepLinkUrl = params.get('deepLink');
    
    // 尝试唤起原生APP
    window.location.href = deepLinkUrl;
    
    // 2秒后若仍在当前页面，跳转到网页版
    setTimeout(() => {
      window.location.href = webUrl;
    }, 2000);
    
    // 页面被隐藏时关闭标签页
    document.addEventListener('visibilitychange', () => {
      if (document.hidden) {
        window.close();
      }
    });
  </script>
</body>
</html>

修改原函数调用中转页：

export const openExternalLink = (webUrl: string, deepLinkUrl: string) => {
  const redirectUrl = `redirect.html?url=${encodeURIComponent(webUrl)}&deepLink=${encodeURIComponent(deepLinkUrl)}`;
  window.open(redirectUrl, '_blank');
};

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