SPA中能否兼容浏览器「所有链接在新标签页打开」的用户偏好？

要解决这个问题，核心是不要无条件拦截所有<a>标签的默认行为，而是让浏览器的原生偏好优先生效，仅在当前页导航的场景下启用SPA无刷新路由。以下是两种可行的实现方式：

方法一：使用Navigation API（推荐） #

现代浏览器支持的Navigation API可以精准拦截同源的当前页导航，同时自动兼容浏览器的全局新标签页偏好——因为当浏览器要在新标签页打开链接时，当前页面不会触发navigate事件，自然不会被拦截。

示例代码：

// 监听导航事件
navigation.addEventListener('navigate', (event) => {
  const targetUrl = new URL(event.destination.url);
  // 判断是否为同源的SPA路由（根据你的实际路由规则调整）
  if (targetUrl.origin === window.location.origin && targetUrl.pathname.startsWith('/products/')) {
    // 阻止浏览器默认导航
    event.preventDefault();
    // 使用history API更新路由状态
    history.pushState({}, '', targetUrl.pathname);
    // 触发SPA页面渲染逻辑（比如根据路径加载对应组件）
    renderPage(targetUrl.pathname);
  }
  // 非同源或需新标签页打开的导航，直接放行，由浏览器处理
});

这个方案无需额外处理点击事件，完全由浏览器的导航机制触发，天然兼容所有用户操作偏好。

方法二：优化点击事件拦截逻辑 #

如果需要兼容旧浏览器，可以通过点击事件的属性判断用户的操作意图，仅拦截符合当前页导航的场景：

document.addEventListener('click', (event) => {
  const link = event.target.closest('a');
  if (!link || link.target === '_blank') return;

  const targetUrl = new URL(link.href);
  if (targetUrl.origin !== window.location.origin) return;

  // 判断是否为需要放行的场景：右键点击、快捷键打开新标签页
  const shouldOpenInNewTab = event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey;
  if (shouldOpenInNewTab) return;

  // 仅在当前页导航的场景下，阻止默认行为并走SPA路由
  event.preventDefault();
  history.pushState({}, '', targetUrl.pathname);
  renderPage(targetUrl.pathname);
});

注意：这种方法无法直接检测浏览器的全局「所有链接新标签页打开」偏好，若要覆盖该场景，可尝试在页面加载时创建隐藏<a>标签模拟点击，通过window.open返回值判断，但该方法可能受浏览器弹窗拦截策略影响，稳定性不如Navigation API。

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