target属性在iframe中需通过name匹配，id无效；_parent跳转至父级iframe，_top跳转至顶层窗口；button不支持target，须用a标签或JS赋值src；跨域时target失效，需postMessage通信配合同源赋值。
target 属性在 iframe 场景下怎么指定跳转目标
直接写 target="frameName" 是最常见也最可靠的方式，前提是目标 <iframe> 有明确的 name 属性，而不是仅靠 id。浏览器只认 name，id 对 target 完全无效。
常见错误是把 <iframe id="main"> 和 <a href="page.html" target="main"> 搭配使用——这会退化成新开标签页，因为没匹配到 name。
-
<iframe name="main" src="blank.html"></iframe>✅ -
<a href="dashboard.html" target="main">进入仪表盘</a>✅ -
<iframe id="main" name="main"></iframe>——id可加可不加，但name必须存在
target="_parent" 和 target="_top" 的实际行为差异
这两个值常被混淆，但作用对象不同：_parent 跳出当前 <iframe> 的直接父级上下文，_top 则强制加载到最顶层（即整个窗口），无视所有嵌套层级。
比如三层嵌套：window → iframe-A → iframe-B → iframe-C，在 iframe-C 里点击链接：
立即学习“前端免费学习笔记（深入）”；
-
target="_parent"→ 加载到iframe-B的内容区域 -
target="_top"→ 加载到最外层window，整个页面重绘 -
target="_self"→ 仅替换当前iframe-C的内容（默认行为）
用按钮模拟链接跳转时 target 不生效怎么办
纯 <button> 元素本身不支持 target，必须借助 JavaScript 或改用 <a> 标签模拟按钮样式。强行给 <button onclick="location.href=..."> 无法触发跨 frame 导航，因为 location.href 总是在当前上下文生效。
正确做法只有两种：
- 用
<a href="..." target="xxx"></a>+ CSS 改成按钮外观（推荐） - 用
document.querySelector('iframe[name="xxx"]').src = "url"显式赋值（需确保同源，否则报Blocked a frame with origin...） - 避免用
window.open(url, "xxx")——它只对已存在的命名窗口有效，对<iframe name="xxx">无反应
跨域 iframe 下 target 跳转的限制与 fallback 方案
如果目标 <iframe> 来自不同源（如 https://example.com 嵌入 https://api.example.net），浏览器会阻止 target 导航，并静默失败（无报错，但页面不更新）。这是安全策略，无法绕过。
此时唯一可行路径是通信 + 主动赋值：
- 父页面监听
message事件，收到子页面请求后调用iframeEl.contentWindow.location.href = url - 子页面通过
window.parent.postMessage({ type: 'NAVIGATE', url: '...' }, 'https://parent-domain.com') - 注意：必须校验
event.origin，且目标 iframe 必须同源才能执行contentWindow.location
非同源场景下，target 形同虚设，别指望它能工作。
