intersectionobserver.observe() 必须显式调用才生效，构造函数仅创建实例；动态插入的dom需挂载后注册，避免重复observe；rootmargin在iframe沙箱中可能失效，需显式指定root或降级检测；innerhtml插入的脚本不执行，应改用domparser或模块化加载；iframe需监听onload再更新ui，unobserve不能替代加载完成判断。
IntersectionObserver.observe() 必须显式调用，否则监听完全不生效
很多人写完 new IntersectionObserver() 就以为万事大吉，结果滚动半天目标 DOM 一点反应没有——根本原因是没调用 observer.observe(el)。构造函数只创建实例，不自动注册任何元素。
实操建议：
- 动态插入的 DOM（比如 fetch 后
innerHTML = htmlString）必须在插入完成、且节点已挂载到 document 后，再执行observer.observe(el) - 用
document.querySelectorAll('[data-load-on-intersect]')批量注册时，先检查 NodeList 长度是否 > 0，避免静默跳过 - 给已注册过的元素加
data-intersected="true"或用Set缓存，防止重复 observe 导致内存泄漏
rootMargin 设为 "200px" 不等于提前 200px 加载，它受 iframe 沙箱限制
在线编辑器（如 JSFiddle、CodePen 默认 iframe）、本地 file:// 协议、或某些 WebView 中，getBoundingClientRect() 返回值可能被归一化，导致 rootMargin: '200px' 实际被截断为 '0px'，失去提前加载效果。
实操建议：
- 先验证环境：
console.log(document.querySelector('main').getBoundingClientRect())，看 top/left 是否为合理数值（非 0 或 NaN） - 若在 iframe 沙箱中运行，优先改用
root: document.querySelector('.editor-container')显式指定父容器为 root，绕过视口计算偏差 - 降级方案：检测
rootMargin失效后，改用scroll + el.getBoundingClientRect().top 模拟
动态插入的 HTML 片段里含 script 标签，不会自动执行
用 fetch('/section.html').then(r => r.text()).then(html => el.innerHTML = html) 插入带 <script src="..."></script> 的 HTML，这些脚本**永远不会执行**——这是浏览器安全策略，不是 bug。
实操建议：
- 若内容可信且必须执行脚本，用
DOMParser解析后遍历script标签，对每个src创建新script元素并 append 到 head/body - 更稳妥的做法是：HTML 片段只含结构和 data 属性，逻辑全部抽离到独立模块，按需
import('./section-logic.js') - 绝对不要对不可信源使用
eval()或innerHTML+ 脚本拼接，XSS 风险极高
加载完成后立即 unobserve，但要等 iframe.onload 再更新 UI 状态
对动态插入的 <iframe></iframe>，仅在 IntersectionObserver 回调里赋值 iframe.src = iframe.dataset.src 是不够的。此时 iframe 已开始加载，但 contentWindow 可能未就绪，postMessage 或样式注入会失败。
实操建议：
- 必须监听
iframe.onload事件，再做状态更新（如移除 loading class、显示边框） - 赋值
src后立刻调用observer.unobserve(iframe)，避免滚动来回触发 - 跨源 iframe 无法访问
contentDocument，不要依赖它做 DOM 操作；同源则需加iframe.contentDocument?.readyState === 'complete'双重判断
真正容易被忽略的是：IntersectionObserver 回调不是“加载完成钩子”，它只表示“进入视口”，而 DOM 渲染、资源下载、脚本执行、iframe 初始化，全都是异步且不同步的链条。把 unobserve() 和 onload 混为一谈，是线上最常见的白屏/交互失效根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
