logo标签列表

在HTML5中使用target="_blank"是否可行？

javascripthtmlwindow
173

我记得在某个地方读到，在HTML5中使用target="_blank"是不再被认可的，但我现在找不到了。

是否继续使用target="_blank"是可以的吗？

我知道这通常被认为是一个不好的主意，但这是打开类似PDF这样的东西的新窗口最简单的方法，而且也不需要依赖JavaScript。

7
一般而言，如果你希望从你的网站打开一个外部网站，那么在我看来，最好的做法是打开一个新窗口（这在大多数浏览器中可能是一个新标签页）。 - hobbes3
3
没问题，它现在已不再被弃用：http://dev.w3.org/html5/markup/a.html - timaschew
7
@hobbes3，请停止干扰我的导航和历史记录。我是浏览者，应该由我决定链接是在新选项卡（中键单击）还是同一个选项卡（左键单击）打开。当我遇到一些网站强制要求按照它们的“正确最佳实践”在新选项卡中打开每个链接时，我会立即且欣然离开。 - Albireo
12
@Albireo，这只是我的个人看法，一些流行的网络服务也采用了同样的想法。例如，在Gmail中点击邮件中的链接默认会打开一个新窗口。 - hobbes3
16
你假设用户和你一样具有高级技术知识。 - Mike Campbell
显示剩余5条评论
9个回答
166

看起来 target="_blank" 仍然可以使用。在最新的HTML5草案中，它被列为浏览上下文关键字。

58
target="_blank"会导致每次用户点击链接时都会打开一个新窗口。除非这确实是您想要发生的事情（很少有这种情况），否则请考虑使用target="somethingUnique"，这样即使用户多次点击链接，他们也只会得到一个打开的窗口。这将为用户带来更好的用户体验。 - BanksySan
5
我认为“target="_blank"”适用的一个例子是分享按钮。 - Martin Thoma
1
如果我正在阅读一篇长文章，并且有一个相关信息的引用在另一个站点（或同一站点）上，我经常希望在不失去原始文章位置的情况下来回跳转。target="_blank"非常适合这种情况。离开页面并且必须交替重新加载每个页面（通常会失去其中一页的位置）是不好的。是的，我知道我可以右键单击链接并在新标签页中打开它，但我不想这样做，因为它会分散我的注意力，而且我怀疑大多数网络用户不知道如何操作。 - Bob Ray
目标属性有很多好处。我不会否认这一点。弹出式广告破坏了它的目的，但是今天随着许多服务在浏览体验之外运行，许多人不想离开当前文章或选项卡，但仍然与重量级下载PDF或视频进行交互。使用_blank确保您让用户填充一个空选项卡-而不是覆盖当前正在填充的内容，如果您在同一会话/站点上提供许多链接。在具有90首歌曲的音频列表中，唯一的名称只会让人感到混乱...长 live目标，长live_blank... - Jonas Lundman
93

在IT技术中，使用target="_blank"是可以的；然而，在XHTML中已被废除，因为在大多数浏览器中，新窗口会弹出警告框。在XHTML中，如果有target属性，则总是显示错误信息。

但是，在HTML 5中重新引入了此功能，因为我们仍然需要它。它是我们的好朋友，我们不能放手。

永远不要放手。

你所声称的只适用于HTML strict。 - qwertzman
对于XHTML和HTML都适用。 - MEMark
18
尽管在HTML5中允许使用target="_blank"，但我个人尽量不使用它（即使是用于在新窗口中打开PDF文件）。
HTML应该定义含义和内容。问问自己，“如果删除target属性，a元素的含义会改变吗？”如果不会，那么代码就不应该出现在HTML中。（实际上，我很惊讶W3C还保留了它...我猜他们真的无法放手。）

浏览器的行为，特别是与用户的交互行为，应该使用客户端脚本语言（如JavaScript）来实现。由于您希望浏览器以特定方式运行，例如打开新窗口，因此应使用JS。但正如您所提到的，这种行为需要浏览器依赖JS。（尽管如果您的网站能够优雅地降级或逐步增强，或其他，那么它仍然可以正常工作。禁用JS的用户不会错过太多内容。）

话虽如此，这两个选项都不是正确答案。在某些地方有一种观点认为，链接如何打开最终应由最终用户决定。 以这个例子为例。

You're surfing Wikipedia, getting deeper and deeper into a rabbit hole. You come across a link in your reading.
Let's say you want to skim the linked page real quick before coming back. You might open it in a new tab, and then close it when you're done (because hitting the 'back' button and waiting for page reload takes too long). Or, what if it looks interesting and you want to save it for later? Maybe you should open it in a new background tab instead, and keep reading the current page. Or, maybe you decide you're done reading this page, so you'll just follow the link in the current tab.
The point is, you have your own workflow, and you'd like your browser to behave accordingly. You might get pretty frustrated if it made these kinds of decisions for you.
THAT being said, web developers should make it absolutely clear where their links go, what types and/or formats of sources they reference, and what they do. Tooltips can be your friend (unless you're using a tablet or phone; in that case, specify these on the mobile site). We all know how much it sucks to be taken somewhere we weren't expecting or make something happen we didn't mean to.
如果有人足够聪明，设计了一个用户小部件，使得每个链接都可以非常轻松地行使他们与生俱来的控制权（轻松到下意识的程度），那么它应该被添加到浏览器中，并且所有的<a>标签都可以提供它。 - Mark Goldfain
在我看来，这个答案在逻辑和架构上是最准确的。在理想的世界中，作者应该更关注块的正确语义标识，而不是预先确定块的行为。在新兴的自适应内容宇宙中，窗口行为可能取决于哪个响应主题或用户首选项在请求时生效；传出的语义“事物”仅在必要时通过转换（DOM或正则表达式，服务器或浏览器）进行修改。通过这种方式，窗口行为可以由CMS中的用户而不是作者来控制。 - Don Day
13

这是打开像PDF这样东西的最简单的方式

这也是最容易让非Windows用户感到恼怒的方式。在其他平台上，PDF可以在浏览器中正常打开。打开新窗口还会破坏导航历史记录，并且在智能手机等较小的平台上会使事情复杂化。

不要仅仅因为旧版Windows有缺陷而打开像PDF这样的东西时打开新窗口。

13
当你告诉别人不要使用某物时，知道什么有帮助吗？向他们展示该使用什么，HTML5下载属性：**<a download="[文件名]" href="file.ext">等</a>**。 - John
8

大多数Web开发者只使用target="_blank"来在新标签页中打开链接。如果您仅使用target="_blank"来在新标签页中打开链接，则易受攻击。当您在新标签页中打开链接（target="_blank"）时，新标签页中的页面可以访问初始标签页并使用window.opener属性更改其位置。

Javascript代码：

window.opener.location.replace(malicious URL)

预防措施：

rel="nofollow noopener noreferrer"

More about the attribute values.

1
我不确定nofollow与安全有关——它是针对搜索引擎机器人的。 - Darryl Hein
@DarrylHein，同样和你打招呼。 - Smart Manoj
作为开发者，你不能强制链接在新标签页中打开。你只能告诉浏览器打开一个新窗口。这是一个很大的区别，尽管浏览器（带有或不带插件）允许你定义如何处理这些情况，比如打开一个新标签页。 - fabsn
7

虽然在HTML5中“target”仍然可接受，但不建议使用。要链接到PDF文件，请使用download属性，而不是“target”属性。

以下是一个示例：

<a href="files/invoice.pdf" download>Invoice</a>

如果原始文件名是为唯一文件存储而编码的，则可以通过为下载属性分配一个值来指定用户友好的下载名称：

<a href="files/j24oHPqJiUR2ftK0oeNH.pdf" download="invoice.pdf">Invoice</a>

请记住，虽然大多数现代浏览器支持此功能，但有些不支持。详情请参见caniuse.com。

2
2
@Gumbo，它回来了。请查看Mike的链接以获取规范的最新版本。 - s4y
0

我认为目标属性对于<link>元素已经被弃用了，而不是<a>，这可能就是你听说它不应该再使用的原因。

-1
你可以使用jquery按照以下方式实现，这将在新窗口中打开它：
<input type="button" id="idboton" value="google" name="boton" /> 

<script type="text/javascript">
    $('#idboton').click(function(){
        window.open('https://www.google.com.co');
    });

</script>
1
为什么不在按钮周围添加一个target="_blank"的表单呢？这似乎更容易，也可以避免使用JS。 - Darryl Hein
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接