HTML中如何用target="_blank"打开新窗口
时间:2025-07-20 12:39:19 166浏览 收藏
从现在开始,我们要努力学习啦!今天我给大家带来《HTML中点击这里这会在新标签页中打开链接。注意事项:使用target="_blank"时,建议同时加上rel="noopener noreferrer"以提高安全性:点击这里这是现代浏览器推荐的做法,防止潜在的安全问题。》,感兴趣的朋友请继续看下去吧!下文中的内容我们主要会涉及到等等知识点,如果在阅读本文过程中有遇到不清楚的地方,欢迎留言呀!我们一起讨论,一起学习!
target属性设置为\_blank可打开新窗口或新标签页。HTML的a标签的target属性有四个预定义值:\_self(默认值,当前标签页打开)、\_blank(新标签页打开,需配合rel="noopener noreferrer"使用以防止安全漏洞和性能问题)、\_parent(用于iframe结构,在父框架中加载)和\_top(跳出所有框架,在顶层加载)。此外,还可通过自定义框架名称控制加载位置;除target属性外,也可用JavaScript的window.open()方法、用户行为(如中键点击)、或
HTML的a
标签的target
属性主要有四个预定义值:_self
、_blank
、_parent
和_top
。要打开新窗口或新标签页,你需要将target
属性设置为_blank
。

解决方案
target
属性,说白了,就是告诉浏览器你这个链接点下去,内容要在哪里显示。这是个看似简单却又充满学问的属性,用好了能极大提升用户体验,用不好则可能带来困扰,甚至安全隐患。
它的核心作用是指定链接文档的加载位置。我们一个一个来看它的值:

_self
: 这是默认值,如果你不写target
属性,它就是这个效果。链接会在当前浏览上下文(也就是当前标签页或窗口)中打开。对我来说,这是最常用也最安全的选项,尤其对于站内导航,你绝不希望用户点一下就跳到新标签页,那样会很快堆满他们的浏览器。_blank
: 这是你想要打开新窗口或新标签页时的选择。当用户点击带有target="_blank"
的链接时,浏览器会打开一个新的空白浏览上下文来加载链接内容。这在处理外部链接时非常常见,比如你想引用一篇外部文章,又不想用户离开你的网站,这时候_blank
就派上用场了。不过,这里面有个大坑,后面我们会详细聊聊。_parent
: 这个值主要用在框架()结构中。它会使链接在当前框架的直接父级框架集中加载。如果当前文档没有父级框架,那么它的行为就和
_self
一样。说实话,现在纯粹的frameset
页面已经很少见了,但依然活跃,所以这个值在某些特定场景下还是有用的。
_top
: 同样是针对框架结构。它会使链接在最顶层的浏览上下文(也就是整个浏览器窗口,跳出所有框架)中加载。如果当前文档本身就是最顶层的,那它也和_self
行为一致。当你被困在多层嵌套的iframe
里,想跳出来时,_top
就是你的救星。
除了这些预定义值,你还可以给target
属性指定一个自定义的框架名称。比如,如果你页面上有一个,那么你可以写
,这样
page.html
就会在名为myFrame
的iframe里打开。这在一些旧系统或者特定布局中偶尔能见到。
为什么给_blank
加上rel="noopener noreferrer"
几乎是强制性的?
你可能经常看到,很多网站在target="_blank"
的链接后面,还会加上rel="noopener noreferrer"
。这可不是什么可有可无的装饰品,而是现代Web开发中一个非常重要的安全和性能最佳实践。对我来说,这几乎已经成了条件反射,只要写_blank
,就一定会带上它。

这背后的原因主要有两点:
安全漏洞(
window.opener
攻击): 当一个链接通过target="_blank"
打开新标签页时,新打开的页面可以通过window.opener
属性访问到原始页面(也就是你的网站)的Window
对象。这意味着,恶意网站可以在新标签页中运行JavaScript代码,通过window.opener.location.replace()
来改变你原始页面的URL,从而实现钓鱼攻击。用户可能根本没察觉到你的页面URL被替换了,然后输入敏感信息。这听起来有点吓人,但确实是真实存在的威胁。性能问题: 即使没有恶意攻击,
window.opener
的存在也会让新打开的页面和原始页面之间建立一个进程连接。如果新页面执行了大量的JavaScript代码,或者有很重的计算任务,它可能会占用更多的系统资源,甚至拖慢原始页面的性能。这对于用户体验来说是不可接受的。
rel="noopener noreferrer"
正是用来解决这些问题的:
noopener
: 这个关键字会阻止新打开的页面通过window.opener
属性访问原始页面。它有效地切断了两个页面之间的联系,从而防止了上述的安全漏洞。noreferrer
: 这个关键字的作用更进一步。它不仅包含了noopener
的功能,还会阻止浏览器在导航到新页面时发送Referer
(注意是单R)HTTP头。Referer
头通常会告诉目标网站用户是从哪个页面跳转过来的。noreferrer
可以增强用户隐私,因为它不会泄露你网站的来源信息给外部网站。
所以,当你需要打开一个新标签页,特别是链接到外部网站时,务必加上rel="noopener noreferrer"
。它就像是给你的链接加了一道安全锁。
代码示例:
阅读更多外部文章
除了target
属性,还有哪些方式可以控制链接的打开行为?
虽然target
属性是控制链接打开行为最直接、最HTML原生的方式,但在实际开发中,我们还有其他一些手段,它们各有优缺点,适用于不同的场景。
JavaScript的
window.open()
方法: 这是最灵活的方式,因为它给了你更多的控制权。你可以指定新窗口的URL、名称、尺寸(宽度、高度)、位置,甚至是否显示工具栏、菜单栏、状态栏等。document.getElementById('myLink').addEventListener('click', function(event) { event.preventDefault(); // 阻止默认的链接跳转行为 window.open('https://example.com/new-page', '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes'); });
我的看法:虽然强大,但
window.open()
常常被浏览器的弹窗拦截器(Pop-up Blocker)无情地阻止。所以,除非你是要打开一个特定的、用户明确期望的弹出窗口(比如一个登录框、一个图片预览),否则不建议用它来替代普通的target="_blank"
。用户体验上,突如其来的弹窗往往是负面的。用户行为(鼠标中键、Ctrl/Cmd + 点击): 这是最被低估但又最强大的“控制”方式。用户对自己的浏览器拥有绝对的控制权。大多数浏览器都支持:
- 鼠标中键点击链接:在新标签页中打开链接。
- Ctrl (Windows/Linux) 或 Cmd (macOS) + 左键点击链接:在新标签页中打开链接。
- 右键点击链接 -> 选择“在新标签页中打开”:手动选择在新标签页中打开。 作为开发者,我们无法阻止用户这样做,也无需阻止。这反而是用户自定义浏览体验的重要方式。
标签: 这是一个相对不那么常用的HTML标签,但它确实能影响链接的打开行为。将
放在HTML文档的部分,可以为页面上的所有相对URL(包括
标签的
href
)设置一个默认的target
。关于我们 我的看法:我个人很少使用
。它会强制页面上所有链接都在新标签页打开,包括内部链接,这通常会给用户带来混乱和不便。只有在极少数的、非常特殊的单页应用或特定框架中,我才会考虑它。通常,最好是显式地在每个需要新标签页的链接上设置target="_blank"
。
总的来说,对于日常的链接行为控制,target
属性依然是主力。JavaScript是补充,而用户行为则是最终决定权。
在现代Web开发中,target
属性的使用场景和最佳实践是什么?
在当前Web开发语境下,target
属性的使用不再是简单的“打开新页面”那么粗暴,它更多地关乎用户体验、安全性和网站的整体架构。我的经验是,要用得恰到好处,既不打扰用户,又能达到设计目的。
常见使用场景:
外部链接 (External Links): 这是
target="_blank"
最主要、最合理的用武之地。当你的网站引用了外部资源、文章、或者链接到合作伙伴的网站时,你通常希望用户在访问这些外部内容的同时,你的网站页面依然保持打开状态。这可以避免用户“流失”到外部网站后,忘记或懒得返回你的网站。- 最佳实践:始终结合
rel="noopener noreferrer"
使用,这是安全底线。同时,可以考虑在链接旁添加一个视觉提示(比如一个外部链接图标↗
),告诉用户这个链接会打开新标签页,增加透明度。
- 最佳实践:始终结合
下载链接 (Download Links): 虽然现在有
download
属性可以直接触发下载,但在某些情况下,你可能仍然希望点击下载链接时,页面不跳转,而是直接在新标签页中开始下载。- 最佳实践:如果文件是直接可下载的(例如PDF、ZIP),优先使用
download
属性。如果需要跳转到一个下载页面,或者下载行为比较复杂,可以考虑_blank
。同样,noopener noreferrer
是标配。
- 最佳实践:如果文件是直接可下载的(例如PDF、ZIP),优先使用
Iframe内链接 (Links within Iframes): 在嵌入式内容(如视频播放器、第三方小部件)中,链接的行为变得复杂。
_parent
或_top
:当你在iframe内部有一个链接,并且希望这个链接能够跳出iframe,在父级窗口或最顶层窗口打开时,这两个值就非常有用。这在用户需要从嵌入内容回到主站时很有用。- 自定义框架名:如果你的页面有多个命名的iframe,你可以让一个iframe里的链接在另一个特定的iframe里打开。这在一些复杂的仪表板或多区域布局中可能会用到。
- 最佳实践:对于iframe内部的链接,如果它们是内部导航,通常应该保持在iframe内部。如果它们指向主站或外部资源,则应根据需要决定是跳出iframe还是在新标签页打开。
不建议使用target="_blank"
的场景:
- 内部导航 (Internal Navigation):
这是最常见的滥用场景。用户期望点击站内链接时,页面就在当前标签页中刷新。如果每次点击内部链接都打开新标签页,用户的浏览器会很快被几十个你的网站标签页淹没,这会让他们感到沮丧,甚至直接关闭你的网站。除非是特定的、完全独立的子功能(比如一个在线编辑器),否则避免对内部链接使用
_blank
。
总结最佳实践:
- 用户体验优先:永远考虑用户的预期。他们希望链接在哪里打开?如果不是外部链接,通常就不应该打开新标签页。
- 安全不妥协:
target="_blank"
与rel="noopener noreferrer"
是黄金搭档,不可分离。 - 清晰的提示:如果链接会打开新标签页,考虑通过视觉元素(如小图标)或
aria-label
属性来告知用户,提高可访问性。 - 避免过度使用:少即是多。新标签页的滥用会造成混乱。
- 测试兼容性:不同浏览器对
target
属性和新窗口行为的处理可能略有差异,务必在主流浏览器上进行测试。
最终,target
属性的选择,是关于平衡用户便利性、网站结构和安全性的艺术。它是一个小细节,却能反映出你对用户体验的重视程度。
终于介绍完啦!小伙伴们,这篇关于《HTML中如何用target="_blank"打开新窗口》的介绍应该让你收获多多了吧!欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识,快来关注吧!
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
256 收藏
-
304 收藏
-
201 收藏
-
153 收藏
-
481 收藏
-
447 收藏
-
356 收藏
-
199 收藏
-
398 收藏
-
370 收藏
-
334 收藏
-
306 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习