关键不是等 DOMContentLoaded 或 window.onload，而是等 JavaScript 渲染完成、数据真正“可见”；需结合 IntersectionObserver、fetch+insertAdjacentHTML、iframe.contentDocument（同源）等方案精准捕获渲染后 DOM。
页面加载完毕后自动获取动态内容，关键不是等 DOMContentLoaded 或 window.onload，而是等 JavaScript 渲染完成、数据真正“可见”——这二者常有延迟。直接在 DOMContentLoaded 里调用 fetch 只能拿到原始 HTML，拿不到 Vue/React 渲染后的 DOM，也拿不到 AJAX 填充后的表格或列表。
用 fetch + insertAdjacentHTML 追加结构化数据
适用于后端提供 JSON 接口（如 /api/posts），前端拼 HTML 字符串插入。这是最可控、XSS 风险最低的方案。
- 确保后端接口返回的是纯数据（JSON），不是预渲染的 HTML 片段；否则容易嵌套转义或结构错乱
- 用
insertAdjacentHTML('beforeend', htmlStr)替代innerHTML +=，避免重复解析整个容器 DOM - 插入前对用户内容做基础过滤：用
textContent提取原始文本，再用document.createElement().textContent = ...回填，可防 XSS - 示例中别漏掉 loading 状态控制——重复点击或快速滚动可能触发多次请求，需加
isFetching标志位
用 Intersection Observer 触发懒加载
适合长列表（如文章流、商品墙），不希望首屏就拉取全部数据，而是“滚动到哪、加载到哪”。
- 监听的占位元素（如
）必须真实存在于 DOM 中，且不能被display: none或visibility: hidden隐藏 -
threshold: 0表示只要有一像素进入视口就触发；若设为0.1，则需 10% 高度进入才响应，更适合防抖 - 每次触发后要调用
observer.unobserve(target)，否则会反复触发；新内容插入后，需重新observe()新增的占位节点 - 注意 Safari 旧版本对
IntersectionObserver的兼容性，必要时降级为scroll+getBoundingClientRect()
用 iframe.contentDocument 获取 JS 渲染后的完整 HTML
仅限同源页面，用于抓取目标页执行完所有脚本后的最终 DOM 快照，比如截图前的内容提取、SEO 预渲染验证。
-
iframe.src赋值后必须立即appendChild到document.body，否则onload不会触发 - 跨域时
iframe.contentDocument会抛DOMException，无法绕过；此时只能换用服务端渲染或 Puppeteer - 不要在
onload后立刻读取outerHTML，某些脚本（如字体加载、图片 onload）可能还未结束；可加setTimeout(..., 100)微调，或监听iframe.contentWindow.document.readyState === 'complete' - 用完务必
document.body.removeChild(iframe)，否则内存泄漏风险明显
真正难的不是“怎么取”，而是判断“什么时候算取到了”——AJAX 请求可能分多轮、框架挂载有生命周期、第三方 SDK（如广告、统计）还会异步注入内容。如果目标是稳定采集，优先查网络面板找真实 API；如果只是增强用户体验，就老实用 fetch + loading 状态 + 错误重试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
