target="_blank"点开没反应是因浏览器主动拦截或降级：chrome 88+等默认切断window.opener并可能强制当前页跳转，尤其在跨域、iframe或pwa环境下；必须同时加rel="noopener noreferrer"且href有效，否则失效。
target="_blank" 为什么点开没反应
不是代码写错了，而是浏览器主动拦截或降级了行为。Chrome 88+、Firefox 79+、Safari 10.1+ 对只写 target="_blank" 的链接，默认切断 window.opener 并可能强制在当前页跳转，尤其在跨域、iframe 或 PWA 环境下更明显。
常见现象包括：
• 点击后页面在当前标签页刷新
• 控制台报 Unsafe usage of target="_blank"
• 新窗口打开但 window.opener 为 null（说明已被浏览器静默干预）
- 必须同时加
rel="noopener noreferrer"，缺一不可 -
href值不能是空字符串、#或javascript:void(0)，否则多数浏览器忽略target - 部分 WebView（如微信内置浏览器旧版本）压根不支持
target，得 fallback 到window.open()
rel="noopener noreferrer" 是怎么起作用的
它不是“增强功能”，而是补上被浏览器默认关闭的安全通道。target="_blank" 单独存在时，新页面能通过 window.opener.location 直接跳转你的原页面，甚至读取同源 DOM、Cookie，或拖慢主线程（因共享渲染进程）。
-
rel="noopener"：强制将新页面的window.opener设为null，彻底阻断反向控制 -
rel="noreferrer"：额外阻止Referer请求头发送，保护来源隐私（注意：它不解决 opener 问题） - 两个值必须共存，顺序无关，但漏掉
noopener就等于没防护 - Safari 旧版对
noreferrer支持不全，所以推荐始终写全rel="noopener noreferrer"
除了 "_blank"，其他 target 值怎么用才不出错
target 只接受几个固定字符串，自定义名字或大小写错误都会失效。浏览器按规则匹配：先找已有命名窗口/iframe，找不到才新建，且跨域时复用逻辑受限（Chrome 92+ 已限制）。
-
target="_self"：显式写出来可覆盖父级<base target>，但一般不用特意加 -
target="_parent"和target="_top"：仅在嵌套<iframe></iframe>场景有效；前者跳到父 frame，后者直接跳出所有 iframe 到顶层 -
target="my-frame"：必须对应页面中某个<iframe name="my-frame"></iframe>，不是id；跨域 iframe 不可控 -
target="_blank"是唯一广泛兼容、语义清晰、无复用副作用的新窗口方式
动态生成链接时 rel 容易漏掉的坑
Vue/React 模板、CMS 富文本、innerHTML 拼接，都容易漏掉 rel。浏览器不会帮你补，框架也不会自动加——这是开发者责任。
- 用 DOM API 创建时，必须显式赋值：
link.rel = 'noopener noreferrer' - 避免用
onclick="window.open()"替代原生<a></a>：会丢失右键菜单、SEO、屏幕阅读器支持 - 区分内外链再加
rel：document.querySelectorAll('a[href^="http"]:not([href*="yoursite.com"])')防止误伤内部锚点 - 检查是否已存在
rel属性，避免重复添加（比如某些 UI 库会自动注入）
最常被忽略的一点：即使你写了 target="_blank" 和 rel="noopener noreferrer"，如果链接被 CSP 策略拦截（比如 frame-ancestors 或 navigation-to 限制），或者运行在 sandboxed iframe 里，依然会失败。这时候得看控制台 Refused to open a window 类错误，而不是怀疑 HTML 写法。
