获取iframe的HTML内容返回undefined？跨域场景问题咨询

核心原因：浏览器同源策略限制 #

浏览器的同源策略会阻止脚本读取跨域iframe的内容。同源要求两个页面的协议、域名、端口三者完全一致：

• 你的主页面如果运行在本地服务器（如http://localhost:8080），而iframe指向http://opsukrat.in，两者域名不同，属于跨域场景。此时$('#iframe').contents()无法获取到iframe的文档对象，后续find('html').html()自然返回undefined。
• 当iframe引用本地myfile.html时，主页面与iframe同域（协议、域名、端口完全匹配），符合同源策略，所以能正常读取内容。

可行解决办法 #

1. 使用postMessage API跨域通信 #

这是跨域场景下最常用的解决方案，通过主页面和iframe页面的消息传递来获取内容：

• 主页面修改脚本：

// 监听iframe发来的消息
window.addEventListener('message', function(e) {
  // 验证消息来源，防止恶意请求
  if (e.origin === 'http://opsukrat.in') {
    $('#contents').html('HTML: ' + e.data);
  }
});

function check_html() {
  // 向iframe发送获取HTML的请求
  document.getElementById('iframe').contentWindow.postMessage('getHtml', 'http://opsukrat.in');
}

• iframe页面（http://opsukrat.in/iframe.html）添加脚本：

window.addEventListener('message', function(e) {
  // 验证请求来源和指令
  if (e.origin === '你的主页面完整域名' && e.data === 'getHtml') {
    // 发送自身的HTML内容
    e.source.postMessage(document.documentElement.outerHTML, e.origin);
  }
});

2. 转为同域访问（若可控目标资源） #

如果http://opsukrat.in/iframe.html是你自己的资源，可以将其部署到与主页面同域的服务器上，直接消除跨域限制。

3. 服务器代理（后端支持） #

通过后端服务器代理跨域请求：主页面请求自己的后端接口，后端去拉取http://opsukrat.in/iframe.html的内容，再返回给前端。这种方式无需修改前端逻辑，由后端处理跨域。

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