如何获取跨域iframe的Body内容？

你遇到的contentDocument为null的问题，核心是浏览器的同源策略限制——当iframe加载的页面和父页面的域名、协议、端口任意一项不同时，浏览器会禁止父页面直接访问iframe的DOM对象，防止恶意窃取敏感数据。

下面分两种情况给出解决办法：

一、你能控制iframe的目标网站（有开发权限） #

方法1：用postMessage实现跨域通信 #

这是最标准的跨域交互方案：

• 父页面监听消息：

  window.addEventListener('message', function(event) {
    // 一定要验证消息来源，避免恶意攻击
    if (event.origin !== 'https://目标iframe的域名.com') return;
    // event.data就是iframe传过来的body内容
    console.log('iframe的body内容:', event.data);
  });
  

• iframe页面主动发送body内容：

  const bodyContent = document.body.innerHTML;
  // 第二个参数填父页面的域名，生产环境别用*（*表示允许发给任意域名，不安全）
  window.parent.postMessage(bodyContent, 'https://父页面的域名.com');
  

方法2：设置document.domain（仅限同主域名的子域名） #

如果父页面和iframe页面是同主域名的子域名（比如a.example.com和b.example.com），可以在两个页面都添加这段代码：

document.domain = 'example.com';

设置后父页面就能正常访问iframe.contentDocument了。

二、你没法控制iframe的目标网站 #

这种情况下没有合法的方法绕过同源策略——这是浏览器的核心安全机制，任何硬绕的手段（比如第三方插件、修改浏览器安全设置）都存在安全风险，也不符合网页规范。

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