应使用 <a> 标签配合 target="_blank" 和 rel="noopener noreferrer" 实现安全的新页面跳转，仅用 target="_blank" 会因 window.opener 导致劫持风险且被安全工具报错。
直接用 <a> 标签 + target="_blank" + rel="noopener noreferrer" 就行，其他方式要么不标准、要么有安全或兼容性风险。
为什么不能只写 target="_blank"
只加 target="_blank" 会让新页面通过 window.opener 访问原页面的 window 对象——这意味着新页面能调用 opener.location.replace() 劫持你的页面，或执行脚本拖慢当前页。浏览器控制台可能不报错，但安全扫描工具（比如 OWASP ZAP、SonarQube）会直接标红。实际项目上线后被运维卡住是常事。
必须补上 rel="noopener noreferrer"：
-
noopener：切断window.opener引用，新页面拿不到原页面上下文 -
noreferrer：不发送Referer头，避免泄露来源路径（对隐私敏感或统计逻辑有影响时需权衡）
<area> 热点图区域怎么开新页
图像映射里的 <area> 标签支持 target 和 rel，但不是所有浏览器都默认识别 rel ——尤其旧版 Safari 和部分邮件客户端渲染引擎。稳妥做法是：
立即学习“前端免费学习笔记（深入）”；
- 确保父级
<map>的name和<img usemap>的值严格匹配（包括大小写和 # 前缀） -
<area>必须带href，空 href（href="#"）不会触发跳转 - 写全属性：
<area shape="rect" coords="10,10,100,100" href="https://example.com" target="_blank" rel="noopener noreferrer">
注意：coords 值是像素坐标，以图片左上角为原点；HTML5 中不再支持百分比写法。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
用 onclick 调 window.open() 的坑
虽然能跑通，但有三个硬伤：
- 禁用 JavaScript 的用户完全无法跳转（
<a>是语义化、可降级的） - 部分浏览器（如 iOS Safari）会拦截非用户手势触发的
window.open()，导致静默失败 - 缺少原生链接的默认行为：无法右键复制链接、中键新标签打开、拖拽到书签栏等
如果非要用 JS 控制，至少保证 fallback：<a href="https://example.com" onclick="window.open(this.href); return false;">链接</a>，但依然不如纯 <a> 干净。
表单提交开新页：<form target="_blank"> 可行但有限制
适用于 POST 提交跳转（比如搜索表单），但要注意：
-
target="_blank"在<form>上有效，但rel属性不被支持——无法防护window.opener风险 - 返回内容会直接渲染在新标签页，不适合跳转到外部站点（尤其是跨域）
- 如果后端返回的是 JSON 或重定向响应，行为不可控，容易出现空白页或下载弹窗
结论：仅限内部页面跳转且确认无安全审计要求时临时使用。
真正关键的不是“怎么打开”，而是“谁控制跳转权”。浏览器信任 <a> 的语义，也只给它完整的安全机制。绕开它，迟早要补课。
