优先确保子页面首行严格为且无bom/空格；若document.body为null，改用contentdocument.documentelement访问，并在load后加微任务延时检测。
iframe 内容加载后 document.body 为 null 怎么办
这通常不是 iframe 没加载完，而是父页面或子页面缺失 ，导致子文档进入怪异模式（Quirks Mode），解析器不生成标准 DOM 结构。浏览器可能渲染出内容，但 <code>document.body 和 document.head 仍为 null。
实操建议：
- 在 iframe 的
src页面中，确保第一行严格是，前面不能有空格、BOM、注释或 XML 声明 - 用
iframe.contentDocument?.documentElement替代直接读iframe.contentDocument.body；若前者为null，说明文档根本未解析成功 - 监听
iframe的load事件后，加延时 1ms 再查body（部分旧版 Safari 在 load 后需微任务时机） - 服务端返回子页面时，HTTP 响应头必须为
Content-Type: text/html; charset=utf-8，不能是text/plain或缺失 charset
跨 iframe 调用时 document.querySelector 返回 null 的真实原因
不是选择器写错，而是上下文隔离：父页面的 document.querySelector 永远查不到 iframe 内部节点；反过来，iframe 内 JS 也查不到父页面的元素——这是同源策略和 DOM 树分隔的硬性限制。
常见误判场景：
- 在父页执行
document.querySelector('iframe').contentDocument.querySelector('header')，但忘了检查contentDocument是否已就绪（可能为null） - iframe 加载的是不同源页面，
contentDocument直接被浏览器置为null，任何访问都抛DOMException: Blocked a frame from accessing... - 子页面用 JS 动态清空了
document.body.innerHTML，但没重建结构，导致后续查询失效
验证方法：在 iframe 控制台运行 document.body?.childElementCount，若为 0 但页面可见，大概率是 JS 覆盖了 body 内容却未补全语义结构（比如只留了个 <div id="app"></div>，没 <header></header> 等）。
HTML5 语义标签在 iframe 中不被识别怎么办
<main></main>、<nav></nav>、<section></section> 这些标签在 iframe 子页面中显示为普通 div，本质是子页面未声明 HTML5 doctype 或编码声明位置错误，导致浏览器降级解析。
关键检查点：
- 子页面 HTML 文件开头必须是
，且该行前无任何字符（含 BOM） -
<meta charset="utf-8">必须紧随开始后第一或第二行，不能放在<title></title>后面 - 避免在子页面
<script></script>中使用未转义的字符串（如模板字符串里写了``），会提前截断解析 - 用
document.querySelectorAll('main, nav, section').length在 iframe 控制台直接验证，返回 0 就说明标签未被识别为语义元素
CI 流程中如何批量校验多个 iframe 子页面结构完整性
不能靠肉眼或手动打开 iframe，得用工具链自动捕获子页面原始 HTML 并校验。核心难点是：子页面 URL 可能带参数、需登录态、或由前端路由动态生成。
可行路径：
- 提取所有 iframe 的
src属性值（静态 HTML 中的硬编码 URL 或构建产物中的 JSON 配置），用curl -sL抓取响应体，保存为临时文件 - 对每个抓取到的 HTML 文件，用
html-validateCLI 扫描：html-validate --config .htmlvalidate.json temp-iframe-1.html - 重点启用规则：
"element-permitted-content"（防非法嵌套）、"no-missing-doctype"、"no-unknown-elements"（识别自定义标签是否注册） - CI 脚本中加前置断言：
grep -q '' temp-iframe-*.html || exit 1，避免漏掉 doctype 检查
真正容易被忽略的点：iframe 子页面若通过 JS 动态注入 HTML 片段（比如 innerHTML = `frame.$('header') 并判断是否非空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
