本文介绍一种在前端环境中动态加载并捕获已执行 JS 渲染后的真实 DOM 内容的方法，通过隐藏 iframe 加载目标页面、监听其加载完成事件，再提取 contentDocument 的完整 HTML 字符串。
本文介绍一种在前端环境中动态加载并捕获已执行 js 渲染后的真实 dom 内容的方法，通过隐藏 iframe 加载目标页面、监听其加载完成事件，再提取 `contentdocument` 的完整 html 字符串。
在 Web 前端开发中，若需获取外部 HTML 页面（如第三方网站或同源动态页）经 JavaScript 执行后的真实 DOM 结构（例如由 DOMContentLoaded、fetch 或框架（Vue/React）注入的内容），仅用 XMLHttpRequest 或 fetch 获取原始 HTML 源码是无效的——因为它们返回的是服务器响应的静态文本，不包含客户端运行脚本后生成的 DOM 变更。
此时，一个轻量且兼容性良好的方案是：利用 <iframe></iframe> 的沙箱化加载能力，在当前页面上下文中执行目标页面的全部脚本，并读取其最终渲染完成的 DOM 快照。具体实现如下：
function readRenderedHTML(url, callback) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
// 必须在添加到 DOM 后才能触发加载
document.body.appendChild(iframe);
iframe.onload = function () {
try {
// 获取 iframe 中的文档对象（注意跨域限制）
const doc = iframe.contentDocument || iframe.contentWindow.document;
const html = doc.documentElement.outerHTML;
// 成功获取后立即清理 DOM
document.body.removeChild(iframe);
// 返回渲染后的完整 HTML 字符串
callback(null, html);
} catch (err) {
// 跨域时会抛出 SecurityError，无法访问 contentDocument
document.body.removeChild(iframe);
callback(new Error('Cross-origin access denied. Ensure the target URL is same-origin.'), null);
}
};
iframe.onerror = function () {
document.body.removeChild(iframe);
callback(new Error('Failed to load iframe: network error or invalid URL.'), null);
};
}
// 使用示例
readRenderedHTML('https://example.com/page.html', (err, html) => {
if (err) {
console.error('Error:', err.message);
return;
}
console.log('Rendered HTML:', html);
});✅ 关键要点说明：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- ✅ 必须同源（Same-Origin）：该方法受浏览器同源策略严格限制；若
url与当前页面协议、域名、端口不完全一致，将触发SecurityError，无法读取contentDocument。 - ✅ 自动等待 JS 执行：
iframe.onload触发时机等价于子页面load事件，意味着 HTML 解析、CSS 加载、JS 执行（含DOMContentLoaded和window.onload中逻辑）均已基本完成。 - ✅ 真实 DOM 快照：
doc.documentElement.outerHTML返回的是当前时刻内存中实际渲染的 HTML 字符串，包含所有 JS 动态插入、修改的节点。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- ❌ 不适用于跨域页面（如抓取
https://google.com）；服务端渲染（Node.js）场景应改用 Puppeteer 等无头浏览器方案。 - ❌ 避免对不可信第三方页面使用此方法，存在 XSS 风险（iframe 内脚本将在当前页面上下文中执行）。
- ⚠️ 若目标页面使用
document.write()或存在重定向，可能影响加载稳定性，建议配合iframe.onerror做健壮处理。
综上，iframe 方案是纯前端环境下获取“JS 渲染后 HTML”的简洁可靠实践，适用于同源管理后台、微前端调试、SEO 预渲染验证等典型场景。
