何时使用 target=”_blank”

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200美元免费信用额度!

锚链接1 可能具有一个 target 属性,该属性控制单击该链接时会发生什么。该属性的可能值之一是 _blank,它告诉浏览器在单击该链接时打开一个新窗口(或选项卡,如果这是用户的偏好)。

这在 HTML 中曾经是“无效的”(也许只是 XHTML?),但人们还是使用了它,因为它有效。现在它在 HTML5 中完全有效。但这样做有充分的理由吗?

一个不好的理由:因为你喜欢这样。

无论喜欢与否,target="_blank" 都会改变默认行为。在同一页面中打开链接是默认行为(就像链接上带有 target="_self" 一样)。

也许您已经养成了在新窗口/选项卡中打开所有链接的个人习惯。这对您来说很棒,但可以安全地假设大多数用户最习惯默认行为。因此,他们不太适应您强加的不同行为。

如果它只是供您自己使用的内部工具,您可以随心所欲。如果其他人使用该站点,请保持原样。

还需要注意的是,用户可以通过 [Meta 键] 单击链接来强制链接在新窗口/选项卡中打开。这意味着两种行为都可用于链接。这也意味着,如果您喜欢打开新选项卡,您可以这样做,而无需将此行为强加于任何人。

通过使用 target="_blank",只有此行为可用。

一个不好的理由:仅仅因为您希望用户永远不要离开您的页面。

品牌 品牌 品牌!眼球宝贝。指标。参与度。

其他网站应该有正常风格的链接,但我们的网站很特别。我们的网站更重要,不应该被抛在后面。

一个不好的理由:“内部”链接和“外部”链接是不同的。

我们将使“内部”链接(指向我们自己站点的链接)正常运行,但“外部”链接(指向其他站点的链接)在新窗口/选项卡中打开。

这与上述两个原因有关,但可能更糟。您知道正常风格的链接是理想的,但如果这意味着用户离开您的网站,您愿意打破这种理想。

我从很多人那里听说过这是一种“约定俗成”。就像应该这样做一样。事实并非如此。

一个不好的理由:链接指向 PDF

或任何其他类型的非网络资源。为什么这应该如此不同?您仍然可以使用后退按钮返回。如果您想帮助用户下载它而不实际打开它,这是一个值得的 UX 目标,但可以通过不同的方式来实现。首先,使用 download 属性。

一个不好的理由:我的客户希望这样

我理解“我不想挑起这场争端”的想法,因为我们的精力是有限的。但奇怪的是,这竟然需要争论。如果他们不信任你这件事,他们信任你什么?

我可能会这样处理它

链接默认行为是正常打开。有些原因可能会让我们想要打破这种行为,我们可以一起讨论这些原因,但对于大多数链接,我们不会这样做。我们不想强迫用户接受我们的愿望,也不想因为这么小的事情而让他们感到沮丧。我们希望我们的用户对我们有好感。

希望您冷静而有学识的方法能让您的客户对有好感。

一个不好的理由:它位于无限滚动页面上

无限滚动很棘手。从某种意义上说,它可能是良好的 UX,因为它可以无中断地传递内容。如果处理不当,它也可能是糟糕的 UX。在大多数情况下,“返回”到无限滚动页面应该带您回到您离开的位置。处理这个棘手的问题是您的工作。仅仅强制链接在新选项卡中打开以避免此问题出现,就等于逃避了您的工作。

一个好的理由:有用户发起的媒体正在播放

例如:音乐、视频、播客……

用户启动了它。切换页面会停止它。此时,要么让链接在新选项卡中打开,要么询问他们是否确定要离开页面。此时,您正在努力为他们做正确的事情,并让他们不要离开他们的位置。

我们之前在这里讨论过这个想法。如果媒体正在播放,请以特殊方式处理链接。当媒体未播放时,链接处于其正常状态。

虽然我这么说的时候,我查看了 YouTube,他们不会在更改视频时打扰您2

一个好的理由:用户正在页面上处理某些内容,如果当前页面更改,这些内容可能会丢失。

也许用户正在写东西。或者整理东西。做任何类型的工作。单击链接并更改页面可能是网络上令人心惊肉跳、糟糕的时刻。我是否刚刚丢失了所有正在做的事情?

即使您采取措施确保他们不会丢失这些工作,让某人经历这种恐慌也应该避免。

我想到了 CodePen,用户经常在那里编写代码。我们做了几件事来提供帮助

  • 转到其他页面的链接,这些链接明确地是“了解更多”风格的链接(例如 [?]),您只有在与编辑器交互时才能看到,这些链接在新选项卡中打开。
  • 普通链接(例如页脚中的链接)具有正常行为,但我们检测到您是否在编辑器中进行了未保存的更改,并在您离开之前提示您保存它们。
  • 如果您确实离开到另一个站点(或浏览器崩溃),我们将保存编辑器在 localStorage 中的状态,以便您不会丢失工作。

结账是另一个案例。当然,您不希望在客户结账过程中丢失客户。指向“送货信息”之类的链接应该可以打开,而不会让他们丢失结账过程中的位置。

在我看来,“阅读文章”不属于这种情况。由于(通常)很容易返回(大多数浏览器甚至会向下滚动到您所在的位置),因此没有丢失的风险,而且读者实际上只是快速浏览而已。

一个好的理由:某些技术上晦涩难懂的点

我正在构建一封电子邮件,需要在 Outlook Kangaroo 2009 企业版中打开,但链接需要使用target="blank",否则它们会在侧边栏查看面板中打开,并且……

好的。

技术

如果你必须……

强制用户确认他们是否要离开页面

window.onbeforeunload = function() {
  return "Two buttons will be below this message asking if the user wants to stay on this page or leave.";
}

正确的HTML

如果你要这样做,不仅需要target属性来实现功能,还需要rel属性来保证安全性。

<a href="http://website.com" target="_blank" rel="noopener">Link Opens in New Tab</a>

阅读更多关于安全问题的资料。

戏剧性

我意识到我在这里表达了一些比较强烈的观点。这是一个每个人都有自己观点的话题。当然,欢迎大家分享你们的观点,但如果可以的话,让我们保持冷静,专注于情况、解决方案和数据。


1 <form>也可以有target="_blank"。我认为这是一个不太常见的用例,但本文中的相同思考方式也适用。

2 如果你选择另一个视频,你会直接跳到那个视频。但在那种情况下,我想知道这是否是UX选择还是广告选择。如果你正在观看视频的一半,点击另一个视频(可能是意外),然后立即点击后退按钮,你的观看位置就会丢失(好吧,YouTube现在处理得很好,但你可以看到这对视频网站来说通常是如何存在问题的)。也许对他们来说,视频之间切换的阻力越小越好,但如果他们能提供一些帮助就更好了。也许可以在时间轴下方添加一个小箭头,类似于“你之前已经看过这段视频到此为止”的链接。