在HTML5中使用target =“ _ blank”可以吗？

165

我记得在某处阅读过，在HTML5中不再可以target="_blank"在HTML5中使用，但现在找不到了。

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

我知道这通常被认为是一个坏主意，但这是通过最简单的方法为PDF之类的东西打开新窗口的方式，并且它也不需要您依赖JavaScript。

javascript  html  window 
— 达里尔·海因（Darryl Hein）
source
5
好吧，一般来说，如果您想从您的站点打开一个外部站点，那么在我看来，打开一个新窗口（可能是当今大多数浏览器中的一个新选项卡）是一个更好的主意。
— hobbes3 2012年
7
@ hobbes3，请不要弄乱我的导航和历史。我是正在浏览的人，由我决定是在新的（单击鼠标中键）还是在相同的（单击鼠标左键）选项卡中打开链接。当我遇到一个网站，迫使我遵循其“正确的最佳做法”在新标签页中打开每个链接时，我将迅速而高兴地离开。
— Albireo
9
@Albireo，这只是我的观点，一些流行的Web服务也包含相同的想法。例如，默认情况下，单击Gmail中邮件中的链接会打开一个新窗口。
— hobbes3
12
@Albireo您假设用户始终像您一样先进和精通技术。
— 2014年
3
有一个原因，为什么target等。存在。有时它们是必需的。例如，使用有状态JS动态生成的页面，其中iframe不如新选项卡理想（例如，在OP状态下查看PDF）。或当安全站点（例如银行）将您发送到外部链接但由于内容过期而不允许使用后退按钮时。像所有事物一样，使用此HTML属性并不是一个“坏主意”，但应谨慎使用，就像所有编程中的每个库，类，函数和属性一样。
— s.co.tt 2014年

Answers:

159

看起来target="_blank"还是可以的。在最新的HTML5草案中，它作为浏览上下文关键字列出。

— 麦克风
source
54
target="_blank"每次用户单击链接时，都会打开一个新窗口。除非这确实是您想要发生的事情（很少发生），否则请考虑使用，target="somethingUnique"这样即使用户多次单击该链接，用户也只能打开一个窗口。它使UX变得更好。
— BanksySan
4
@BanksySan：我认为target="_blank"很好的一个例子是共享按钮。
— Martin Thoma 2014年
如果我正在阅读一篇长文章，并且引用了另一个站点（或同一站点）上的一些相关信息。我经常想在两者之间来回跳跃，而又不会失去我在原始文章中的地位。target =“ _ blank”非常适合此操作。不必离开页面，而不得不交替地重新加载每个页面（通常会丢失我在任一页面中的位置）。是的，我知道我可以右键单击该链接并在新选项卡中将其打开，但是我不想这样做，因为它会破坏我的注意力，我怀疑大多数Web用户都不知道如何操作。
— 鲍勃·雷
目标属性有很多好处。我不会对此表示怀疑。弹出广告客户破坏了它的目的，但是如今除了浏览体验外还有如此多的服务在运行，许多人不想离开当前的文章或标签，但仍然与大量下载的PDF或视频进行交互。使用_blank可以确保您允许用户填充一个空选项卡-如果您在同一会话/站点上提供许多链接，则不要覆盖当前的填充内容。唯一的名称只是凌乱的音频列表有90首歌曲....万岁目标，万岁_blank ...
— 乔纳斯Lundman
91

可以使用 target="_blank" ; 这是在XHTML中取消的，因为在大多数浏览器中定位新窗口始终会弹出弹出警报。XHTML将始终在验证中显示target属性的错误。

HTML 5带回了它，因为我们仍在使用它。这是我们的朋友，我们不能放手。

绝不放手。

— 格雷厄姆
source
您声明的内容仅对HTML严格有效。
— qwertzman 2013年
对于XHTML以及HTML。
— MEMark 2014年
15

虽然 target="_blank"是在HTML5上可接受的，我个人从来没有尝试使用它（即使是在新窗口中打开PDF文件）。

HTML应该定义含义和内容。问问自己，“会的意义了的a，如果该元素的变化target属性被删除吗？” 如果不是，则代码不应包含在HTML中。（实际上，我很惊讶W3C保留了它……我想他们真的不能放手。）

浏览器行为，特别是与用户的交互行为，应使用JavaScript等客户端脚本语言来实现。由于您希望浏览器以特定方式运行，即打开一个新窗口，因此应使用JS。但是正如您提到的，此行为要求浏览器依赖JS。（尽管您的网站正常降级或逐步升级，或以其他方式出现，那么它仍然可以。禁用了JS的用户不会错过太多。）

话虽这么说，这些都不是正确的答案。那里的某个观点认为，链接的打开方式应最终由最终用户决定。举这个例子。

您正在浏览Wikipedia，越来越深入到兔子洞中。您在阅读中遇到一个链接。

假设您想快速浏览链接页面，然后再返回。您可能会在新标签页中将其打开，然后在完成后将其关闭（因为点击“后退”按钮并等待页面重新加载花费的时间太长）。或者，如果它看起来很有趣并且您想要将其保存以备以后使用呢？也许您应该改为在新的背景标签中打开它，并继续阅读当前页面。或者，也许您决定已经阅读完此页面，因此只需单击当前选项卡中的链接即可。

关键是，您拥有自己的工作流程，并且希望浏览器相应地运行。如果它为您做出了这样的决定，您可能会感到非常沮丧。

话虽这么说，Web开发人员应该绝对清楚他们的链接在哪里，他们引用的源的类型和/或格式以及他们的工作。工具提示可以是您的朋友（除非您使用平板电脑或手机；在这种情况下，请在移动网站上指定）。我们都知道被带到我们意想不到的地方或发生某些我们并非故意要做的事情是多么糟糕。

— 查维
source
而且，如果有人聪明地设计了一个用户小部件，使每个链接都可以很容易地行使其上帝赋予的控制权（很容易，如在下意识中），那么应该将其添加到浏览器中，并且所有<a>标签都可以提供它。
— Mark Goldfain 2014年
在我看来，这个答案在逻辑上和架构上都是最准确的。在理想的世界中，作者应该更多地关注对块的正确语义识别，而不是预先确定块的行为。在新兴的自适应内容世界中，窗口行为可能取决于在请求时有效的响应主题或用户偏好。传出的语义“事物”仅在必要时通过转换（DOM或正则表达式，服务器或浏览器）进行修改。这样，窗口行为可以取决于用户，而不是CMS中的作者。
— Don Day
12

这是打开PDF之类的新窗口的最简单方法

这也是惹恼非Windows用户的最简单方法。在其他平台上的浏览器中打开PDF很好。打开新窗口还会弄乱导航历史，并使在智能手机等较小平台上的事情变得复杂。

不要仅因为Windows的较早版本已损坏而打开诸如PDF之类的新窗口。

— 荷马
source
11
知道当您告诉别人不要使用某些东西时会有什么帮助吗？向他们展示使用的HTML5下载属性：<adownload="[此处的文件名]"href="file.ext">等</a>。
— 约翰
5

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

JavaScript代码：

window.opener.location.replace(malicious URL)

预防：

rel="nofollow noopener noreferrer"
— 范希克里希纳
source
我不确定nofollow是否与安全性有关–是针对搜索引擎机器人的。
— Darryl Hein
4

虽然target在HTML5中仍然可以接受，但不是首选。要链接到PDF文件，请使用下载属性而不是target属性。

这是一个例子：

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

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

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

请记住，尽管大多数现代浏览器都支持此功能，但有些浏览器可能不支持。有关更多信息，请参见caniuse.com。

— kojow7
source
0

您可以使用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>
— 约翰·斯蒂文·埃尔南德斯·奥索里奥
source
为什么不使用target =“ _ blank”在按钮周围添加表单。似乎那样会更容易，并且不需要JS。
— Darryl Hein '18
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.