应使用标签配合href、target="_blank"和rel="noopener noreferrer"实现安全新开页跳转；其他方式存在覆盖页面、弹窗拦截、可访问性差、seo失效、中键点击异常等缺陷，且需注意本地file协议限制、cms属性剥离及状态校验。
直接用 <a></a> 标签，加 href、target="_blank" 和 rel="noopener noreferrer" —— 这是唯一既安全又语义正确、还兼容所有主流场景的声明方式。
为什么不能用 <button></button> + onclick 模拟跳转
看似灵活，实则埋雷：
-
window.location.href = 'https://xxx'会覆盖当前页，不满足“新开页”需求 -
window.open('https://xxx', '_blank')在 iOS Safari、Chrome 移动版常被弹窗拦截（尤其无用户手势触发时） -
<button></button>对屏幕阅读器报“按钮”，但行为却是导航，可访问性失败 - SEO 不识别
button的跳转意图，链接权重无法传递 - 中键点击、Ctrl+点击、右键“在新标签页打开”全部失效
rel="noopener noreferrer" 缺一不可
只写 rel="noreferrer" 或漏掉 noopener 都不安全：
-
noopener切断新页面对window.opener的访问权限，防止恶意站点控制原页面（如重定向钓鱼、篡改 DOM） -
noreferrer额外阻止 Referer 头发送，保护来源隐私（推荐共用，但不能替代noopener） - Chrome/Firefox 已将未声明
noopener的target="_blank"视为潜在风险，部分企业安全策略会直接拦截
本地开发时跳转失败？先查 file:// 协议
用双击打开 index.html 文件（地址栏显示 file:///...）时，浏览器默认禁止 <a href="https://..."></a> 跳转，静默失败，控制台无报错：
- 必须通过本地服务器启动（如 VS Code Live Server、
python3 -m http.server），让页面运行在http://localhost:xxx下 - CMS 或富文本编辑器（如 WordPress 可视化模式）常自动剥离
target和rel属性，务必切到“文本模式”手动补全 - 目标站若设置了
Content-Security-Policy: sandbox或X-Frame-Options: DENY，跳转后可能空白，这不是你代码的问题
真正容易被忽略的，是跳转前的状态校验——比如按钮本该灰掉或禁用，但没检查登录态或网络连通性，用户点下去才看到 401 或超时白屏。安全隔离只是基础，交互健壮性得靠 JS 补位，而不是靠链接本身扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
