HTML中链接在新窗口打开的实现方法

最直接的方法是在<a>标签中添加target="_blank"属性，且必须搭配rel="noopener"以阻断window.opener安全风险并提升性能。

使用 target="_blank" 是最直接的方法

HTML 中让链接在新窗口（或新标签页）打开，核心就是给 <a> 标签加上 target="_blank" 属性。浏览器会据此触发新上下文打开行为。

常见写法示例：

<a href="https://example.com" target="_blank">访问示例网站</a>

注意：target="_blank" 在所有现代浏览器中都有效，但默认行为可能因浏览器设置略有差异（比如有的开新标签页，有的开新窗口），用户无法强制指定“一定是窗口”还是“一定是标签页”。

target="_blank" 必须搭配 rel="noopener"

不加 rel 属性存在安全风险：新页面可通过 window.opener 访问原页面的 window 对象，可能被用于钓鱼或性能降级攻击。

立即学习“前端免费学习笔记（深入）”；

正确做法是始终配对使用：

<a href="https://example.com" target="_blank" rel="noopener">安全的新窗口链接</a>

• rel="noopener" 阻断 window.opener 引用，且提升新页面性能（避免共享进程）
• 如果还需防止新页面通过 document.referrer 泄露来源，可加 rel="noreferrer"（它隐含 noopener）
• 不要只写 rel="nofollow" —— 它和打开方式无关，只影响 SEO 爬虫

为什么 target="_blank" 有时没反应？

常见失效原因不是语法错，而是环境或配置干扰：

• 浏览器启用了“弹出窗口拦截器”，且链接是 JS 动态生成、无用户手势触发（比如在 setTimeout 里调用 click()）
• 链接在 iframe 中，而父页面设置了 sandbox 属性且未包含 allow-popups
• 某些 CMS 或富文本编辑器自动过滤了 target 属性（尤其在用户输入内容中）
• 写了 target="_blank" 但忘了写 href，此时标签不被视为可点击链接

想控制新窗口尺寸或位置？HTML 原生做不到

target="_blank" 不接受任何尺寸、位置参数。所谓 target="width=500,height=400" 是无效的，会被忽略。

如真有定制窗口需求（极少见），必须用 JavaScript 的 window.open()：

window.open('https://example.com', '_blank', 'width=600,height=400,noopener');

但要注意：window.open() 在多数浏览器中会被拦截，除非它由用户明确触发（如 onclick 事件内调用）；且移动端基本无视尺寸参数。

绝大多数场景下，老老实实用带 rel="noopener" 的 target="_blank" 就够了——既安全，又可靠，还符合语义。