本文介绍一种通过动态创建 iframe 加载目标页面并提取其最终 dom 状态的方法，从而获取经 javascript 渲染后的完整 html 内容，适用于跨域受限但同源可访问的场景。
本文介绍一种通过动态创建 iframe 加载目标页面并提取其最终 dom 状态的方法，从而获取经 javascript 渲染后的完整 html 内容，适用于跨域受限但同源可访问的场景。
在前端开发中，单纯使用 XMLHttpRequest 或 fetch 获取 HTML 源码仅能读取服务器返回的原始 HTML 字符串，无法捕获由客户端 JavaScript 动态插入或修改后的 DOM 内容（例如通过 document.createElement、innerHTML、Vue/React 渲染等生成的内容）。这是因为 AJAX 请求不执行脚本，也不触发浏览器渲染流程。
要真正“看到” JS 执行后的页面结果，需借助浏览器的完整渲染引擎——最直接的方式是将目标页面加载到一个隐藏的 <iframe></iframe> 中，等待其 load 事件完成（确保 HTML 解析、CSS 加载、JS 执行均结束），再通过 contentDocument 访问其最终 DOM 并序列化为 HTML 字符串。
以下是一个健壮的实现示例：
java-api-doc-generator
下载
分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
function fetchRenderedHTML(url, callback) {
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
// 必须先挂载到 DOM，否则 contentDocument 可能不可访问
document.body.appendChild(iframe);
iframe.onload = function () {
try {
// 兼容不同浏览器：contentDocument（标准）或 contentWindow.document（IE）
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (!doc) {
throw new Error('Failed to access iframe document (likely cross-origin)');
}
const html = doc.documentElement.outerHTML;
callback(null, html);
} catch (err) {
callback(err, null);
} finally {
// 清理：移除 iframe，避免内存泄漏和副作用
document.body.removeChild(iframe);
}
};
iframe.onerror = function () {
callback(new Error(`Failed to load iframe from ${url}`), null);
document.body.removeChild(iframe);
};
}
// 使用示例
fetchRenderedHTML('https://example.com/page.html', (err, html) => {
if (err) {
console.error('Error fetching rendered HTML:', err);
} else {
console.log('Final rendered HTML:', html);
}
});⚠️ 重要注意事项：
立即学习“Java免费学习笔记（深入）”；
-
同源限制（Same-Origin Policy）：该方法仅适用于与当前页面同协议、同域名、同端口的目标 URL。若跨域，
iframe.contentDocument将抛出安全错误（Blocked a frame with origin ... from accessing a cross-origin frame）。此时需服务端代理或 CORS 配合fetch+ 服务端渲染（如 Puppeteer）方案。 -
DOMContentLoadedvsload：iframe.onload确保资源（含 JS、图片）加载完毕，比DOMContentLoaded更稳妥；但若页面 JS 依赖异步操作（如setTimeout、fetch回调），仍可能未完全就绪——此时需结合自定义就绪信号（如window.__READY__ = true）轮询判断。 -
性能与安全：动态 iframe 会真实执行目标页所有脚本（含广告、分析代码），存在潜在安全与性能风险，切勿用于不可信来源。生产环境建议配合沙箱属性（
sandbox="allow-scripts"）进一步限制权限。
总结：该技术是纯前端环境下模拟“浏览器快照”的轻量级方案，核心价值在于绕过静态 HTML 的局限性，获取 JS 驱动的真实视图。合理使用它，可支撑网页抓取预览、SEO 调试、自动化测试快照等实际需求。
