我记得在某个地方读到过,在 HTML5中不再允许使用 target="_blank",但我现在找不到了。
target="_blank"
继续使用 target="_blank"可以吗?
我知道这通常被认为是一个坏主意,但它是打开一个新窗口(比如 PDF)的最简单的方法,而且它也不需要你依赖 JavaScript。
没错!
Http://www.w3.org/tr/2010/wd-html5-20100624/text-level-semantics.html#the-a-element
看起来 target="_blank"还是不错的,它在 最新的 HTML5草案中被列为浏览上下文关键字。
使用 target="_blank"是可以的; 这在 XHTML 中已经取消了,因为在大多数浏览器中,定位新窗口总是会弹出警告。XHTML 将始终在验证中显示带有 target 属性的错误。
HTML 5把它带了回来,因为我们仍然在使用它。它是我们的朋友,我们不能放弃。
永不放手。
这是打开一个新窗口的最简单的方法,比如 PDF
这也是最容易惹恼非 Windows 用户的方法。PDF 在其他平台的浏览器中打开得很好。打开一个新的窗口也会破坏导航历史,并使智能手机等较小平台上的问题复杂化。
不要仅仅因为旧版本的 Windows 坏了,就为像 PDF 这样的东西打开新窗口。
虽然 target="_blank"是 在 HTML5中可以接受,但我个人尝试从不使用它(即使是在新窗口中打开 PDF)。
HTML 应该定义 意义和内容。问问你自己,“如果去掉 ABC1属性,a元素的 < strong > 意思是 是否会改变?”如果没有,代码不应该在 HTML。(事实上,我很惊讶 W3C 还保留着它... ... 我猜他们真的就是放不下。)
a
浏览器 行为,特别是 与用户的交互行为,应该使用客户端脚本语言(如 JavaScript)来实现。因为您希望浏览器以特定的方式运行,例如,打开一个新窗口,所以您应该使用 JS。但是正如您所提到的,这种行为需要浏览器依赖于 JS。(虽然如果你的网站降低优雅,或逐步增强,或者别的什么,那么它应该仍然是好的。禁用 JS 的用户不会错过太多。)
也就是说,以 这些都不是正确的答案。在某些地方,有一种观点认为链接打开的方式最终应该由最终用户决定。为例。
你正在浏览维基百科,越来越深地陷入一个兔子洞。你在阅读中发现了一个链接。 假设您想在返回之前快速浏览链接页面。你可以在一个新的标签打开它,然后关闭它,当你完成(因为按下’回’按钮和等待页面重新加载太长时间)。或者,如果它看起来很有趣,你想把它保存起来以后再用呢?也许你应该在一个新的背景选项卡中打开它,然后继续阅读当前页面。或者,也许你决定你已经读完了这个页面,所以你只需要点击当前选项卡中的链接。 关键是,你有你自己的工作流程,你希望你的浏览器有相应的行为。如果它为你做了这些决定,你可能会非常沮丧。
你正在浏览维基百科,越来越深地陷入一个兔子洞。你在阅读中发现了一个链接。
假设您想在返回之前快速浏览链接页面。你可以在一个新的标签打开它,然后关闭它,当你完成(因为按下’回’按钮和等待页面重新加载太长时间)。或者,如果它看起来很有趣,你想把它保存起来以后再用呢?也许你应该在一个新的背景选项卡中打开它,然后继续阅读当前页面。或者,也许你决定你已经读完了这个页面,所以你只需要点击当前选项卡中的链接。
关键是,你有你自己的工作流程,你希望你的浏览器有相应的行为。如果它为你做了这些决定,你可能会非常沮丧。
也就是说,网页开发者应该清楚地表明他们的链接去了哪里,他们引用了什么类型和/或格式的资源,以及他们做了什么。工具提示可以是你的朋友(除非你正在使用平板电脑或手机; 在这种情况下,在移动站点上指定这些)。我们都知道被带到一个意想不到的地方或者让一些意想不到的事情发生有多糟糕。
虽然目标在 HTML5中仍然是可以接受的,但不是首选。要链接到 PDF 文件,请使用 下载属性而不是 target 属性。
这里有一个例子:
<a href="files/invoice.pdf" download>Invoice</a>
如果原始文件名是为唯一的文件存储编码的,那么您可以通过为 download 属性分配一个值来指定一个用户友好的下载名称:
<a href="files/j24oHPqJiUR2ftK0oeNH.pdf" download="invoice.pdf">Invoice</a>
请记住,虽然大多数现代浏览器支持这一功能,但有些浏览器可能不支持。
大多数 Web 开发人员只使用 target="_blank"在新标签页中打开链接。如果只使用 target="_blank"在新的选项卡中打开链接,那么它很容易受到攻击者的攻击。在新选项卡(target="_blank")中打开链接时,在新选项卡中打开的页面可以访问初始选项卡并使用 window.opener属性更改其位置。
window.opener
Javascript 代码:
window.opener.location.replace(malicious URL)
预防:
rel="nofollow noopener noreferrer"
关于属性值的更多信息。
我认为目标属性不适用于 <link>元素,而不适用于 <a>,这可能就是为什么您听说不再使用它的原因。
<link>
<a>
你可以用下面的 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>