name 属性是 iframe 的必需标识符,决定 window.frames 索引和 target 命中;未设置则无法通过名称访问,仅能依赖序号(易错);动态创建需提前赋值;window.frames[name] 返回子窗口对象而非 dom 元素;跨域时仅支持有限操作。

name 属性是 iframe 的唯一标识符,不是可选装饰
它决定了该 iframe 能否被 window.frames 正确索引,也决定了链接的 target 是否能精准命中。没设 name 的 iframe,即使 DOM 存在,window.frames['xxx'] 也会返回 undefined,<a target="xxx"></a> 也会新开标签页而非复用 iframe。
常见错误现象:
- 写了
<iframe src="a.html"></iframe>,但window.frames[0]可取,window.frames['myFrame']却报错 -
<a href="b.html" target="myFrame"></a>点击后总新开窗口,而不是在已有 iframe 中加载
原因很简单:没写 name,浏览器就无法建立名称映射。哪怕你只用序号访问(如 window.frames[0]),也依赖 iframe 在文档流中的顺序,一旦 DOM 插入位置变动或动态增删,极易出错。
实操建议:
- 每个
iframe必须显式设置name,且值唯一、合法(不能含空格、特殊字符) - 避免用数字或纯下划线开头,推荐类似
main-content、sidebar-ads这类语义化名称 - 如果 iframe 是 JS 动态创建的,记得在插入前赋值:
ifr.name = 'dashboard-iframe'
window.frames[name] 返回的是子窗口的 window 对象,不是 iframe 元素本身
window.frames['xxx'] 拿到的是那个 iframe 所承载页面的 window,不是你 DOM 里写的 <iframe name="xxx"></iframe> 这个元素节点。这点混淆会导致很多 DOM 操作失败。
比如你想改子页面标题,得写:window.frames['xxx'].document.title = 'New Title';想调子页面函数,得写:window.frames['xxx'].doSomething()。而 document.querySelector('iframe[name="xxx"]') 才是你能直接操作的 iframe 元素节点 —— 它有 src、height 等属性,但没有 document 或 location。
容易踩的坑:
- 误把
window.frames['xxx']当作元素去调.setAttribute(),结果报setAttribute is not a function - 跨域时仍试图访问
window.frames['xxx'].document,触发SecurityError: Blocked a frame with origin ... from accessing a cross-origin frame - 同域但 iframe 尚未加载完成就访问
window.frames['xxx'].document,拿到空或不完整 document,导致脚本执行异常
target 属性跳转必须与 name 完全匹配,大小写敏感且不可带空格
<a href="page.html" target="content-frame"></a> 要生效,对应 iframe 的 name 必须一字不差是 content-frame。浏览器不会做 trim 或 case-insensitive 匹配。
使用场景很明确:多 tab 式布局、后台管理侧边菜单跳转主内容区、广告位按需替换内容等。只要目标 iframe 已存在且同域,点击链接就会复用该 iframe 加载新页面,而不是新开窗口或标签页。
注意点:
- 如果 target 名称不存在,浏览器默认行为是新开 tab(相当于
target="_blank") - 若多个 iframe 使用相同
name,只有第一个会被命中,其余被忽略 - 表单提交也可用
target="xxx",效果与链接一致,适合无刷新提交后保持主页面状态
name 属性不参与同源策略判定,但访问权限仍受同域限制
name 本身只是字符串标识,跨域 iframe 也能设 name="report-iframe",甚至能通过 window.frames['report-iframe'] 获取到对象引用 —— 但你几乎什么都干不了。
你能做的仅限于:
- 读取
window.frames['xxx'].location.href(只读,且可能被 sandbox 限制) - 调用
window.frames['xxx'].location.assign()或.replace()触发跳转(跨域允许) - 监听
load事件(但无法获知跳转后内容)
真正需要读写子页面 DOM 或调用方法时,必须满足同域(协议、域名、端口三者完全一致)。否则哪怕 name 写得再准,window.frames['xxx'].document 仍是 inaccessible。
复杂点在于:有些开发误以为设了 name 就等于打通了通信通道,其实它只是“门牌号”,门能不能开,还得看同源这把锁是否打开。











