target="_blank" 在 firefox 的新标签页中打开但不是 chrome (Svelte)

Question

我有一个小型单页应用程序，其中包含一些内部 link 和一些外部 link。我希望所有外部 link 自动在新选项卡中打开，因此我将 html 设置如下：

    <base target="_blank" />

这在 chrome 中非常有效。当我单击导航栏上的 links 时，我的网站会在同一选项卡中导航，而当我单击外部 link 时，它会尽职尽责地在新选项卡中打开。

但是，当我使用 firefox（测试了多个版本）访问我的网站时，每一个 link，甚至是我导航栏上的内部导航栏，都会在新选项卡中打开。

如何更正此问题，以便在所有浏览器的新选项卡中仅打开外部 link？谢谢

Answer 1

静态解决方案是在内部链接上显式显示，即向这些链接添加 target="_self"。

如果您不想那样做，Javascript 或许也能提供帮助，具体取决于您的设置。

假设你的内部链接都是相对的或者至少是服务器绝对链接，并且假设你的页面是静态的（比如链接在DOMContentLoaded之后没有添加到页面），下面Javascript片段将解决任务：

document.addEventListener('DOMContentLoaded', () => {
  for (const externalLink of document.querySelectorAll('a[href^=http]'))
    externalLink.target = '_blank';
})

<a href="https://google.com">Google</a>
<a href="/">Some internal link</a>

正如另一个人所指出的，当然这只有在您的链接可以从文档访问时才有效（如果它们位于 shadowDOM 中则不行）。

Answer 2

如果您想覆盖浏览器的默认功能，您需要专门为外部 link 设置目标。制作一个执行此操作的 link 组件。

Answer 3

根据@connexo 的评论，我通过明确说明

解决了这个问题

target="_self"

在导航栏链接中。

target="_blank" 在 firefox 的新标签页中打开但不是 chrome (Svelte)

target="_blank" opens in new tabs in firefox but not chrome (Svelte)

html

svelte