如何让HTML超链接在新页面打开？a元素target属性设置指南-html教程-PHP中文网

必须同时写 target="_blank" 和 rel="noopener noreferrer"，只写前者会被现代浏览器降级为当前页跳转；后者不是“锦上添花”，而是阻断 window.opener 访问、防止 referer 泄露的强制要求。

如何让html超链接在新页面打开？a元素target属性设置指南

必须同时写 target="_blank" 和 rel="noopener noreferrer"，只写前者会被现代浏览器降级为当前页跳转；后者不是“锦上添花”，而是阻断 window.opener 访问、防止 Referer 泄露的强制要求。

为什么只写 `target="_blank"` 会失效？

Chrome 49+、Firefox 52+、Safari 12.1+ 默认对孤立的 target="_blank" 施加安全限制：若未显式声明 rel="noopener"，浏览器会静默将其行为退化为 target="_self" —— 表现就是点击后仍在当前页跳转，毫无预警。

常见误写：target="blank"（漏下划线）、target="_new"（非标准值），两者均被当作自定义窗口名处理，因无对应窗口，最终 fallback 到当前页
href="#" 或 href="" 即使加了 target="_blank" 也不会触发跳转，因为没有真实目标 URL
部分 Android WebView 或 iOS WKWebView 默认禁用弹窗，target="_blank" 可能完全静默失败，需额外配置 setJavaScriptCanOpenWindowsAutomatically(true)

`rel="noopener noreferrer"` 缺一不可的原因

rel="noopener" 切断新页面对原页面 window.opener 的引用，防止其调用 location.replace() 劫持原页；rel="noreferrer" 阻止 HTTP Referer 头发送，避免来源 URL 泄露。二者作用不同，不能互相替代。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

只写 rel="noreferrer" 而漏掉 noopener：旧版 Safari（window.opener，存在钓鱼风险
只写 rel="noopener"：虽已切断 opener，但 Referer 仍可能泄露敏感路径（如含 token 的 URL）
两个属性顺序无关，可任意排列，但必须共存于同一 @#@#@#@#@#@#@#@#@#@0`）极易遗漏 rel，尤其在模板逻辑复杂或多人协作时。更可靠的方式是用 DOM API 显式构造：
```
const link = document.createElement('a');
link.href = 'https://example.com';
link.target = '_blank';
link.rel = 'noopener noreferrer'; // 注意：这里必须是字符串，不是数组
link.textContent = '示例链接';
document.body.appendChild(link);
```
- 插入前可用 link.outerHTML 检查是否三项齐全
- 若需批量处理已有链接（如外链自动加 target），建议用 CSS 选择器筛选 a[href^="http"]，再统一设置 target 和 rel
- Vue/React 中不要依赖 v-bind 或 props 动态拼接属性字符串，应直接绑定 rel 字段，确保 SSR 和客户端一致
target 的合法值有哪些？别踩自定义命名的坑

W3C 明确只承认五种合法值：_self、_blank、_parent、_top 和 framename（匹配 <iframe name="xxx"></iframe>）。所有其他写法（如 _window、_search）均为非标准，浏览器忽略并 fallback 到 _self。
- target="dashboard" 不等于“每次开新页”，而是“复用名为 dashboard 的窗口/标签页”——第二次点击会覆盖加载，不是新增
- target="_parent" 在无 iframe 嵌套时等效于 _self；target="_top" 在单页应用中极少需要，误写成 target="parent"（缺下划线）会触发非标准窗口复用，且无 noopener 保护
- 全局 <base target="_blank"> 会影响所有相对链接，但无法自动注入 rel，反而增加安全隐患，不推荐使用
真正容易被忽略的不是语法，而是上下文：iframe 的 sandbox 属性可能直接禁用 target="_blank"，WebView 需要手动开启弹窗权限，旧版 Safari 对 noreferrer 的兜底能力有限——这些都不是加个属性就能解决的，得看环境、测真机、查控制台报错。