iframe可实现无刷新跳转，但仅限同源场景，需严格匹配a标签target与iframe的name属性，且面临SEO限制、跨域高度适配难、初始加载阻塞、history不同步等架构性成本。
能用 iframe 实现无刷新跳转，但前提是目标页面与主站同源，且你接受 iframe 带来的隔离性、SEO 限制和潜在性能开销。它不是现代 SPA 的替代方案，而是特定场景下的快速解法——比如后台管理系统的菜单栏 + 内容区分离架构。
iframe 的 src 更新必须靠 target 或 JS 控制
点击链接不刷新整页，关键在于让链接的跳转「落进」指定 iframe。这依赖两个属性严格匹配：a 标签的 target 和 iframe 的 name。
<a href="user-list.html" target="main-frame">用户列表</a><iframe name="main-frame" src="home.html"></iframe>- 只要
target和name值完全一致（大小写敏感），点击就会在该 iframe 中加载新页面 - 如果没设
name，或target值拼错、多空格、带下划线等，浏览器会新开标签页——这是最常踩的坑 - 不要混用
id当target，target只认name
iframe 高度自适应需绕过跨域限制
iframe 内容高度变化时，父页面无法直接读取其 document.body.scrollHeight——一旦跨域就抛出 SecurityError。同源时才可安全操作。
- 同源场景下，用
onload+setTimeout避免 DOM 未就绪：iframe.onload = () => { setTimeout(() => { iframe.height = iframe.contentDocument.body.scrollHeight; }, 0); }; - 别直接写
iframe.height = iframe.contentWindow.document.body.scrollHeight，因为某些浏览器（如 Safari）可能在 onload 触发时 body 还没渲染完 - 若内容含图片，需监听
iframe.contentDocument的DOMContentLoaded或用img.onload回调再重算高度 - 跨域时，只能靠服务端返回固定高度，或由子页面主动 postMessage 通知父页高度值
避免 iframe 初始阻塞页面渲染
浏览器默认会同步加载 iframe 的 src，拖慢主页面首屏速度。尤其当目标页响应慢或资源大时，整个页面卡住。
立即学习“前端免费学习笔记（深入）”；
- 把真实地址存到
data-src，初始src设为空或about:blank：<iframe src="about:blank"></iframe> - 用
IntersectionObserver懒加载（进入视口才触发）：observer.observe(iframe); iframe.src = iframe.dataset.src; - 不用
visibility: hidden或display: none控制加载时机——这些不影响浏览器是否发起请求 - 移动端要注意，
IntersectionObserver在部分旧 Android WebView 中不支持，需降级为 scroll + offsetTop 判断
iframe 与 history.pushState 不联动
点击链接更新 iframe 内容后，URL 地址栏不会变，用户刷新页面会回到初始 src，而不是当前显示的页面。这不是 bug，是 iframe 的天然行为。
- 若需 URL 同步，必须手动监听点击、调用
history.pushState()，并在popstate中恢复 iframesrc - 例如：点击
user-edit.html时执行history.pushState({page: 'user-edit'}, '', '?p=user-edit') - 监听
window.addEventListener('popstate', e => { iframe.src = e.state?.page + '.html'; }) - 注意：
pushState不会触发页面刷新，但需自行维护状态映射表，否则前进/后退会丢失上下文 - 这个逻辑容易漏掉，上线后用户反馈“点返回键回到首页”就是典型表现
真正麻烦的不是怎么让 iframe 动起来，而是它不动的时候——比如跨域报错、懒加载失效、history 不同步、SEO 完全不可见。这些都不是语法问题，而是架构选择带来的隐性成本。
