如何获取包含iframe内部内容的完整页面HTML字符串？

这个问题我碰到过好多次啦，核心坑点在于iframe是一个独立的文档环境——父页面的document.getElementsByTagName('html')[0].innerHTML只能拿到<iframe>标签本身的代码，根本没法穿透到它内部的内容。下面分两种场景给你具体解决方案：

一、同域iframe（父页面和iframe域名一致） #

这种情况浏览器没有安全限制，直接就能拿到iframe内部的内容，步骤很清晰：

1. 先确保iframe已经加载完成，最好在onload事件里操作，避免拿空内容
2. 获取iframe元素和它内部的document对象
3. 把父页面的HTML结构克隆一份，替换掉其中的iframe标签为它内部的HTML内容
4. 最后把克隆后的结构转成字符串就行

示例代码：

// 等待页面和iframe都加载完成
window.addEventListener('load', () => {
  // 获取目标iframe
  const targetIframe = document.querySelector('iframe');
  // 拿到iframe内部的document对象（兼容不同浏览器写法）
  const iframeDoc = targetIframe.contentDocument || targetIframe.contentWindow.document;
  
  // 克隆父页面的整个html节点（避免修改原页面）
  const parentHtmlClone = document.documentElement.cloneNode(true);
  // 找到克隆节点里的iframe
  const iframeClone = parentHtmlClone.querySelector('iframe');
  
  // 把克隆的iframe替换成它内部的完整内容
  iframeClone.replaceWith(...iframeDoc.documentElement.childNodes);
  
  // 转成包含iframe内容的完整HTML字符串
  const fullPageHtml = parentHtmlClone.outerHTML;
  console.log(fullPageHtml);
});

二、跨域iframe（父页面和iframe域名不同） #

这时候浏览器的同源策略会直接阻止你访问iframe的document对象，前端层面没有直接“硬闯”的方法，只能通过以下两种合法方式处理：

方式1：用postMessage API（自己控制两个域名时用） #

让iframe主动把自己的HTML内容发送给父页面，父页面接收后再整合。一定要验证发送方域名，避免安全风险！

• 父页面代码：

window.addEventListener('load', () => {
  const targetIframe = document.querySelector('iframe');
  // 向iframe发送获取HTML的请求，指定允许的域名
  targetIframe.contentWindow.postMessage('request-html', 'https://你的iframe域名.com');
});

// 监听iframe发来的消息
window.addEventListener('message', (event) => {
  // 验证消息来源，确保是信任的域名
  if (event.origin !== 'https://你的iframe域名.com') return;
  
  const iframeHtml = event.data;
  // 克隆父页面HTML并替换iframe内容
  const parentHtmlClone = document.documentElement.cloneNode(true);
  const iframeClone = parentHtmlClone.querySelector('iframe');
  iframeClone.outerHTML = iframeHtml;
  
  const fullPageHtml = parentHtmlClone.outerHTML;
  console.log(fullPageHtml);
});

• iframe页面代码：

// 监听父页面的请求
window.addEventListener('message', (event) => {
  // 验证父页面域名
  if (event.origin !== 'https://你的父页面域名.com') return;
  
  if (event.data === 'request-html') {
    // 把自己的完整HTML发给父页面
    const selfHtml = document.documentElement.outerHTML;
    event.source.postMessage(selfHtml, event.origin);
  }
});

方式2：后端爬虫拼接（无法控制iframe域名时用） #

如果iframe是第三方网站的内容，前端完全没办法拿到，只能通过后端去抓取iframe对应的页面内容，再把父页面的HTML和抓取到的iframe内容拼接起来，最后返回给前端。

注意事项 #

• 同域场景下一定要等iframe加载完成再操作，不然会拿到空值
• 跨域用postMessage时，必须验证event.origin，防止恶意页面发送伪造消息

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