动态设置iframe高度遇跨域拦截问题技术求助

兄弟，你遇到的这个报错是浏览器同源策略在搞事情！简单说就是你的父页面（http://localhost:52191）和IFrame里的内容不属于同一个域名/端口/协议，浏览器为了安全，禁止跨域页面互相访问DOM内容，所以你拿不到IFrame内部的高度。

先梳理下你的需求：要给关联搜索功能的IFrame设置动态高度，内容高度在0px到9750px之间变化，之前尝试获取内部表格属性失败，用了这段代码却触发了跨域错误：

<script type="text/javascript"> 
function iframeLoaded() { 
  var iFrameID = document.getElementById('idIframe'); 
  if(iFrameID) { 
    // here you can make the height, I delete it first, then I make it again 
    iFrameID.height = ""; 
    iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px"; 
  } 
} 
</script>

接下来分两种情况给你解决方案：

一、如果你能控制IFrame里的内容（比如是自己开发的页面） #

这种情况最理想，推荐用postMessage实现安全跨域通信，这是浏览器允许的合规方式：

1. 父页面代码（接收IFrame发来的高度） #

在父页面添加监听事件，收到高度后更新IFrame的高度：

window.addEventListener('message', function(event) {
  // 可以验证发送方的origin，避免恶意消息，替换成你的IFrame实际域名
  if (event.origin === "http://your-iframe-domain.com") {
    const iframe = document.getElementById('idIframe');
    iframe.style.height = event.data + 'px';
  }
}, false);

2. IFrame内部页面代码（发送自身高度） #

在IFrame页面里，当内容加载完成或动态变化时，把自身高度发给父页面：

// 页面加载完成时发送高度
window.onload = function() {
  const height = document.body.scrollHeight;
  // *可以替换成父页面的具体域名，安全性更高
  window.parent.postMessage(height, '*');
};

// 如果搜索结果会动态更新，在内容变化后重复调用上面的发送逻辑即可

另外还有个更简单的路子：如果能把IFrame内容部署到和父页面同源的地址下（相同域名、端口、协议），那你原来的代码就能直接用，完全不用改逻辑。

二、如果你不能控制IFrame里的内容 #

这种情况就比较棘手了，因为同源策略是浏览器的强制安全限制，没有办法直接绕过它获取内部DOM高度。你可以试试这些变通方案：

• 根据搜索属性的不同，提前预估对应的高度，手动设置IFrame高度
• 给IFrame设置最大高度（比如9750px），同时添加滚动条，确保内容都能正常查看
• 联系提供IFrame内容的服务商，问问他们有没有提供跨域获取高度的方案，或者支持postMessage通信

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