HTML中“子页面”实为iframe嵌入的独立HTML文件，DOM与JS环境隔离，需用postMessage通信、URL传参、显式设置宽高，并注意跨域限制、加载监听及替代方案选择。
HTML 子页面不是独立文件，而是通过 <iframe></iframe> 嵌入的
浏览器里没有“子网页”这个原生概念，所谓“子页面”，实际是主页面用 <iframe></iframe> 加载另一个 html 文件的结果。它和主页面共享同一进程（同源时），但 dom、js 执行环境隔离。
常见错误现象：document.getElementById 在主页面找不到 iframe 里的元素；iframe 内 JS 报 Blocked a frame with origin ... from accessing a cross-origin frame；页面加载后 iframe 高度塌陷、滚动条错位。
- 必须确保 iframe 的
src指向一个可访问的 HTML 路径（如./widget.html），不能是相对路径错误或 404 - 跨域时无法用 JS 访问 iframe 内容，也别指望
window.parent直接通信 —— 得用postMessage - 给
<iframe></iframe>显式设width和height，否则默认 300×150，容易误以为没加载成功 - 若子页面需响应式适配父容器，用 CSS
width: 100%; height: 100%+ 父容器设position: relative更稳妥
用 <iframe></iframe> 时怎么传参数给子页面
URL 查询参数是最简单可靠的方式。子页面自己解析 window.location.search，主页面拼好再赋给 src。
使用场景：仪表盘嵌入不同用户 ID 的统计页、后台菜单切换不同功能模块、预览编辑器实时渲染 Markdown。
- 主页面写法：
<iframe src="./report.html?user_id=123&theme=dark"></iframe> - 子页面读取：
new URLSearchParams(window.location.search).get('user_id') - 避免把敏感信息（如 token）放 URL 里，会暴露在历史记录和服务器日志中
- 不要用
srcdoc动态拼 HTML 字符串传复杂数据 —— XSS 风险高、编码难、调试痛苦
iframe 内容加载完成怎么监听
load 事件只保证资源加载完，不等于 DOM 可操作；如果子页面本身有异步初始化逻辑（比如 Vue 组件挂载），load 触发时可能还没 ready。
立即学习“前端免费学习笔记（深入）”；
性能影响：频繁创建/销毁 iframe 会触发重排重绘，比单纯显示隐藏 div 开销大得多。
- 监听主页面 iframe 元素的
load事件：iframe.addEventListener('load', () => { console.log('iframe loaded'); }) - 子页面初始化完成后，主动发
postMessage通知父页面：window.parent.postMessage({ type: 'READY' }, '*') - 别用
setTimeout等待 —— 不稳定，且掩盖了真实依赖关系 - 兼容性没问题：
<iframe></iframe>和load事件所有现代浏览器都支持
替代方案：什么时候不该用 iframe
如果子内容只是静态片段、无独立交互逻辑、不需要沙箱隔离，用 <include></include> 或服务端模板更轻量。iframe 是重武器，别用来切豆腐。
容易被忽略的地方：iframe 默认会触发新 HTTP 请求，即使子页面已缓存；它有自己的 cookie 上下文（同源时共享，跨域时不带）；打印时默认不包含 iframe 内容，除非显式设置 print-css 规则。
- 纯结构复用（如页脚、侧边栏）→ 用构建工具的
include或前端框架的组件机制 - 需要父子双向高频通信 → 改用单页应用路由（
React Router/Vue Router）分页 - 要 SEO 友好 → iframe 内容不会被搜索引擎当作主页面一部分索引
- 移动端手势穿透问题（比如 iframe 内滑动卡顿、缩放失效）→ 优先考虑 CSS
contain: layout style paint隔离
