同域iframe的contentDocument.body.innerHTML代码访问为空该如何解决

你遇到的不是浏览器的跨域阻止逻辑，是代码执行时机早于iframe加载完成时间导致的：

• 页面解析到内嵌script标签时会直接执行代码，此时iframe刚完成DOM创建，仅发出了资源请求，内部页面还没有加载、渲染完成，contentDocument.body是空的初始状态，所以拿到空值
• 你打开开发者工具查看属性时，距离页面加载已经过了一段时间，iframe已经完成了内部页面的加载，所以能看到完整的innerHTML内容

调整代码逻辑，监听iframe的load事件，等iframe内部页面加载完成后再读取内容即可，修改后的script部分代码如下：

// 先获取iframe元素
const iframe = document.getElementById('iframeID');
// 监听加载完成事件
iframe.addEventListener('load', () => {
  const pageSource = iframe.contentDocument.body.innerHTML;
  document.getElementById("sourceOut").innerHTML = pageSource;
  console.log(pageSource);
});

额外说明：

• 如果后续你替换为代理页面抓取外部站点源码，只要保证代理页面和父页面同域，以上逻辑可以正常执行
• 如果出现跨域场景，即使加了load事件也无法读取iframe内容，符合浏览器同源策略限制

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