iframe的name和target必须严格匹配，大小写、空格、引号均影响；刷新后需用localstorage保存并恢复src；跨域时须用postmessage通信；iframe适用于隔离、兼容性要求高及文件上传等场景。
iframe 的 name 和 target 必须严格匹配
这是最常出错的地方：左边导航链接点不动、右边 iframe 不刷新，八成是 name 和 target 值不一致。浏览器只认字符串完全相等——大小写、空格、引号都算数。
实操建议：
- 统一用小写字母定义
name，比如<iframe name="main"></iframe> - 所有左侧
<a></a>标签必须显式写target="main"，不能依赖默认行为 - 避免用
id替代name——target只认name，不认id - 如果用 JavaScript 动态生成链接，确保拼接的
target字符串和 iframe 的name完全一致
刷新后页面回到首页？得存当前 src 到 localStorage
用户按 F5 或 Ctrl+R 时，整个父页重载，iframe 会退回到初始 src，不是上次打开的子页。这不是 bug，是浏览器默认行为。
解决思路是：在 iframe 页面卸载前记下当前 URL，重载后主动恢复。
实操建议：
- 在 iframe 子页中加监听：
window.addEventListener("beforeunload", () => localStorage.setItem('iframe_src', window.location.href)) - 在父页的 iframe 标签加载完后（比如
DOMContentLoaded阶段），读取并设置：if (localStorage.getItem('iframe_src')) iframeEl.src = localStorage.getItem('iframe_src') - 注意：若子页跨域，
window.location.href会被浏览器限制为"about:blank"，此时需服务端配合或改用 postMessage 传参
子页想刷新父页里的 iframe？用 parent.window 操作
比如子页提交表单成功后，要让父页的菜单栏更新状态，或让另一个 iframe 重新加载数据——不能直接操作父 DOM，必须走 parent 引用。
实操建议：
- 子页 JS 中获取父页 iframe 元素：
const iframe = parent.document.getElementById('main') - 刷新它：
iframe.src = iframe.src（触发重载）或iframe.src += (iframe.src.includes('?') ? '&' : '?') + 't=' + Date.now()（防缓存） - 若父页用 Vue/React，不要直接改 DOM；应在父页暴露方法到
window（如window.refreshMenu = () => { ... }），子页调用parent.refreshMenu() - 跨域时
parent.document会报 SecurityError，此时只能靠postMessage发消息，父页监听message事件再处理
为什么不用 Ajax？iframe 的真实优势在哪
不是技术落后才用 iframe，而是某些场景下它更稳、更轻、更兼容。
适用情况：
- 子页是独立 HTML 文件（比如多个部门静态手册），无需共享 JS 状态，iframe 天然隔离
- 目标设备是老旧工业终端（如 Zebra 扫描器）、内嵌浏览器，不支持 fetch 或 Promise
- 不想处理路由、history.pushState、SPA 的首屏白屏和 SEO 问题
- 表单上传文件时，用
<form target="uploadFrame"></form>配合隐藏 iframe，比 FormData + fetch 更兼容 IE10
真正容易被忽略的是：iframe 的 sandbox 属性。后台系统若加载不可信内容（比如用户上传的 HTML 报表），务必加 sandbox="allow-scripts allow-same-origin" 并去掉 allow-top-navigation，否则子页能用 parent.location 劫持整个后台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
