如何获取执行JS脚本后的外部HTML页面内容？

嘿，这个问题我之前也踩过坑！你用XMLHttpRequest拿到的其实只是服务器返回的静态HTML源码——浏览器根本不会帮你执行页面里的JS脚本，那些靠JS动态生成的内容自然就没包含在返回结果里啦。

下面分两种场景给你可行的解决方案：

1. 前端同域场景（目标页面和当前页面同域名） #

如果是在浏览器里想获取同域的动态页面内容，可以用iframe模拟真实的页面加载过程，等iframe里的JS全部执行完再取内容：

// 创建一个隐藏的iframe
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = '你的目标页面路径';

// 监听iframe加载完成事件（此时JS已执行完毕）
iframe.onload = function() {
  // 获取iframe里渲染后的完整HTML
  const dynamicHtml = iframe.contentDocument.documentElement.outerHTML;
  // 这里可以把内容传给你的回调函数或者直接处理
  console.log('拿到动态内容啦：', dynamicHtml);
  // 用完记得把iframe从页面移除
  document.body.removeChild(iframe);
};

// 把iframe添加到页面上开始加载
document.body.appendChild(iframe);

⚠️ 注意：如果目标页面和当前页面不同域，浏览器的同源策略会阻止你访问iframe的内容，这种情况前端就没办法直接处理了，得靠后端来做。

2. 后端/爬虫场景（支持跨域） #

如果需要获取跨域的动态页面内容，或者是在Node.js环境下做爬虫，可以用无头浏览器工具，比如Puppeteer——它会模拟真实的Chrome浏览器加载页面，自动执行所有JS脚本，然后你就能拿到完全渲染后的HTML了。

首先安装Puppeteer：

npm install puppeteer

然后写代码：

const puppeteer = require('puppeteer');

async function fetchDynamicHtml(targetUrl) {
  // 启动浏览器
  const browser = await puppeteer.launch();
  // 打开一个新页面
  const page = await browser.newPage();
  // 加载目标页面，等待网络空闲（确保所有JS都加载执行完）
  await page.goto(targetUrl, { waitUntil: 'networkidle0' });
  // 获取渲染后的完整HTML
  const dynamicHtml = await page.content();
  // 关闭浏览器
  await browser.close();
  return dynamicHtml;
}

// 使用示例
fetchDynamicHtml('你的目标页面URL')
  .then(html => {
    console.log('渲染后的HTML：', html);
    // 这里可以处理拿到的内容，比如解析DOM、提取数据等
  })
  .catch(err => console.error('出错啦：', err));

再补充下你原来的代码为什么不行：XMLHttpRequest本质就是发了个HTTP请求，只拿到服务器返回的原始文本，没有触发浏览器的渲染流程，页面里的JS根本没机会执行，所以动态生成的内容自然不在返回结果里。

备注：内容来源于stack exchange，提问作者Lara