Firefox下Svelte应用中<a>标签target属性行为异常问题

问题现象 #

我开发的Vite+Svelte4 Web应用（使用page.js做客户端路由）中，通过带自定义target属性的<a>标签实现标签页复用：

<a href="/trucks" target="myapp_trucks">Trucks</a>
<a href="/cars" target="myapp_cars">Cars</a>

原本点击这些链接会复用对应名称的标签页，但在Firefox中，打开过带不同自定义target的详情页（比如<a href="/cars/125667" target="myapp_car_125667">Car 125667</a>）后，再点击/trucks或/cars的链接，会新开标签页而非复用已存在的窗口。Chrome和纯HTML页面中无此异常。

原因推测 #

问题根源在page.js的客户端路由拦截逻辑：

• page.js默认会拦截所有<a>标签的点击事件，转为客户端路由跳转，这绕过了浏览器对自定义target的原生处理逻辑。
• Firefox对窗口/标签页的引用管理机制与Chrome不同，当通过客户端路由跳转页面后，浏览器无法正确识别之前创建的自定义target窗口，导致再次点击时判定窗口不存在，从而新开标签。

解决方案 #

方案1：让page.js跳过自定义target的链接拦截 #

修改page.js的点击拦截逻辑，当<a>标签带有非默认值的target时，交给浏览器原生处理：

document.addEventListener('click', function(e) {
  const link = e.target.closest('a');
  if (!link) return;

  // 跳过带自定义target的链接，不使用客户端路由
  const customTargetPrefixes = ['myapp_trucks', 'myapp_cars', 'myapp_car_'];
  if (link.target && customTargetPrefixes.some(prefix => link.target.startsWith(prefix))) {
    return;
  }

  // 原page.js路由处理逻辑
  const url = link.getAttribute('href');
  if (url && url.startsWith('/') && !link.target) {
    e.preventDefault();
    page.show(url);
  }
});

方案2：手动处理点击事件，强制复用target #

在Svelte组件中，对需要复用target的链接手动调用window.open，绕过page.js的拦截：

<a 
  href="/trucks" 
  target="myapp_trucks"
  on:click={(e) => {
    e.preventDefault();
    window.open('/trucks', 'myapp_trucks');
  }}
>
  Trucks
</a>

<a 
  href="/cars" 
  target="myapp_cars"
  on:click={(e) => {
    e.preventDefault();
    window.open('/cars', 'myapp_cars');
  }}
>
  Cars
</a>

验证说明 #

两种方案的核心都是让浏览器原生处理带自定义target的链接跳转，避免page.js的客户端路由干扰Firefox的窗口引用管理，从而恢复标签页复用的预期行为。

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