如何使用JavaScript提取页面DOM加载前后的完整HTML代码

核心限制 #

• 直接在普通网页上下文运行JS无法实现该需求，两个核心原因：
  1. 同源策略禁止跨域读取和控制第三方页面的内容与加载流程
  2. 你之前尝试的document.body、document.all等API都是从当前DOM树读取内容，DOM树在HTML开始解析时就会同步构建，只要有内联JS执行就会修改DOM，不可能通过这类API拿到未处理的原始HTML，原始内容必须从网络请求的响应层获取
• 不存在可以直接在第三方页面运行、同时跨加载阶段提取两个版本HTML的原生JS方法，必须借助浏览器扩展或无头浏览器这类拥有更高权限的工具

方案1：浏览器扩展（适用手动访问任意页面场景） #

浏览器扩展拥有跨域注入脚本、监听网络请求的权限，不需要修改目标页面任何内容即可实现需求：

• 在扩展的webRequest模块监听目标页面的主文档请求，直接读取响应的原始内容，得到JS执行前的原始HTML
• 在扩展的内容脚本中监听页面load事件，待所有JS执行、DOM渲染完成后，调用document.documentElement.outerHTML获取最终渲染后的HTML

方案2：无头浏览器工具（适用批量自动处理场景） #

如果需要批量处理大量页面，可以使用Puppeteer、Playwright这类Node.js端的无头浏览器控制工具，完全可以自定义加载暂停节点，分步提取HTML，示例代码如下：

const puppeteer = require('puppeteer');
const targetUrl = '你要抓取的页面地址';

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  let rawOriginalHtml = '';

  // 监听网络响应，获取原始HTML
  page.on('response', async (response) => {
    if (response.url() === targetUrl && response.request().resourceType() === 'document') {
      rawOriginalHtml = await response.text();
    }
  });

  // 等待页面完全加载
  await page.goto(targetUrl, { waitUntil: 'load' });
  // 获取JS执行后的最终HTML
  const finalRenderedHtml = await page.content();

  console.log('原始HTML：', rawOriginalHtml);
  console.log('最终HTML：', finalRenderedHtml);

  await browser.close();
})();

• 你也可以根据需求调整page.goto的waitUntil参数，或者在特定加载事件触发时暂停页面执行，先提取对应阶段的HTML再让页面继续加载，自定义程度极高。

内容的提问来源于stack exchange，提问作者TryingToLearn