正确做法是HTML中不写src而用data-src存地址，JS控制时机将data-src值赋给src才触发加载。
iframe src 为空时怎么触发加载
初始不加载、点击后再加载，关键就是别让 src 在 HTML 解析阶段就存在。浏览器一看到带 src 的 <iframe>，立刻发起请求，不管它是否在视口里。
正确做法是：HTML 中完全不写 src，改用 data-src 存地址；JS 控制时机，把值搬进 src 才真正触发加载。
- 避免写
<iframe src="page.html">—— 这等于默认 eager 加载 - 推荐写法：
<iframe width="100%" height="600"> - JS 加载逻辑里，先设
iframe.src = iframe.dataset.src，再显式调用iframe.contentWindow.location.reload()（仅当需强制刷新） - 注意：设完
src后，iframe.contentDocument不会立刻可读，得监听load事件
用 target 属性实现纯 HTML 菜单跳转
如果你的场景是“顶部菜单/侧边栏点击 → 主内容区换 HTML”，且要兼容老旧设备（比如 Zebra 扫描终端、旧版 Android 浏览器），就别碰 JS，直接用原生 target + name 组合。
核心是让所有链接指向同一个命名 <iframe>，浏览器自动复用该 iframe 实例，不重复创建 DOM，也不触发全页刷新。
立即学习“前端免费学习笔记（深入）”；
-
<iframe name="contentFrame" src="pages/home.html">——name值必须和target完全一致 - 菜单链接统一加
target="contentFrame"，例如：<a href="pages/shipping.html" target="contentFrame">发货手册</a> - 不支持 JS 的环境也能跑；但缺点是无法监听页面加载状态、不能加 loading 提示、不能拦截错误
- 如果多个 iframe 共存，确保每个
name唯一，否则链接可能跳错目标
动态加载后怎么操作 iframe 内部元素
从主页面 JS 直接查 document.getElementById("xxx") 是找不到 iframe 里元素的——它们属于另一个独立文档对象（contentDocument 或 contentWindow.document）。
必须先切换上下文，否则所有查找都会超时失败。Selenium 用户尤其容易在这里卡住，但原生 JS 同样适用这套逻辑。
- 等 iframe 加载完成：
iframe.addEventListener("load", () => { ... }) - 拿到内部 document：
const doc = iframe.contentDocument || iframe.contentWindow.document - 查元素必须基于
doc：doc.querySelector("#username")，不是document.querySelector - 若 iframe 启用了
sandbox且没开allow-scripts，contentDocument会是 null，控制台报Blocked a frame with origin "null" from accessing a cross-origin frame - 跨域 iframe 无法访问
contentDocument，这是浏览器安全限制，无解
loading="lazy" 为什么有时候没效果
loading="lazy" 看起来简单，但实际生效受三重限制：浏览器支持、DOM 可见性、iframe 是否被隐藏。
它只对「首次插入 DOM 且尚未加载」的 iframe 生效；一旦 src 已设置，再加 loading 属性也没用。
- Chrome 77+ / Firefox 75+ / Safari 15.4+ 支持；IE 和部分旧安卓 WebView 完全忽略该属性，回退为 eager
- 如果 iframe 外层被
display: none或visibility: hidden包裹，懒加载会被禁用——浏览器认为它“不可见”，但又无法判断未来是否可见，干脆不加载 - 首屏必需的内容别用 lazy，否则用户滚动前永远看不到；此时应删掉
loading属性，或手动控制（如 IntersectionObserver +data-src） - Network 面板里看到 iframe 请求仍出现在 early 阶段？检查是否误写了
src，或者父容器有动画/JS 导致 iframe 提前进入视口计算范围
src 属性，或者在 iframe 已加载后反复 set src 导致重复请求。 
