iframe可作为HTML模块化方案，但仅适用于同源、轻交互、无需JS共享上下文的静态片段；它本质是物理隔离的独立文档嵌入，非最佳实践，需显式设置width、height、loading="lazy"及style="border:none;overflow:hidden"，跨域通信必须用postMessage并严格校验origin。
iframe 能不能当 HTML 模块化方案用
能，但只适用于特定场景——同源、轻交互、无需 JS 共享上下文的静态片段。它不是模块化“最佳实践”，而是无构建工具时最可控的物理隔离手段。别指望它自动按需加载 JS 或复用逻辑，它只是把一个独立 HTML 文档“框”进来。
同源 iframe 必须设的三个属性
直接写 <iframe src="header.html"> 大概率白屏或错位。浏览器默认尺寸是 300×150px，且带滚动条和边框。必须显式控制：
-
width和height要设（哪怕用 CSS 控制，也得先给内联值防闪） -
loading="lazy"防止非首屏 iframe 拖慢主页面渲染 -
style="border: none; overflow: hidden;"——scrolling="no"在 HTML5 已废弃，CSS 才可靠
跨域 iframe 的脚本通信怎么写才不翻车
如果 iframe src 是不同域名（比如嵌第三方管理后台），window.frames[0].contentWindow 会因同源策略报 Blocked a frame with origin。唯一安全通道是 postMessage：
父页发消息：window.frames[0].postMessage({ type: 'init', data: { theme: 'dark' } }, 'https://third-party.com')
立即学习“前端免费学习笔记（深入）”；
iframe 内监听：window.addEventListener('message', e => { if (e.origin !== 'https://third-party.com') return; /* 处理 e.data */ })
漏校验 e.origin 就等于开后门；发消息不指定目标 origin，可能被中间页截获。
为什么不用 frameset 或 <frame>
<frameset> 和 <frame> 标签在 HTML5 中已彻底废弃，Chrome/Firefox/Safari 全都不支持，连 polyfill 都没人维护。写出来就是无效 HTML，解析器直接忽略，页面只剩空白。别查老教程，那是 2005 年的遗留物。
真正要拆分布局，用 CSS Grid + <iframe> 组合：主页面用 display: grid 划区域，每个区域放一个 iframe。这样既保持语义清晰，又规避了 frameset 的兼容性雷区。
