经常有项目会要求实现iframe高度自适应，如果是同域的还好说，如果是跨域的，父页面没有办法操作子页面，想要正确获取子页面高度的话，可以采用以下办法：

方法一：使用HTML5 postMessage

实现原理：子页面检测页面高度通过postMessage将值传给父页面

父页面: http://www.parent.com

<iframe src="http://www.children.com" frameborder="0" id="iframe" scrolling="no" width="100%"></iframe>   <script>window.onload = function(){
        window.addEventListener('message',function(event){if(event.origin == "http://www.children.com") {
                document.getElementById('iframe').style.height = event.data + "px";
            }
        })
    }</script>

子页面: http://www.children.com

window.onload = function () {
    var h = document.body.scrollHeight;
    parent.postMessage(h, "http://www.parent.com");
}

方法二：使用iFrame Resizer插件

iFrame Resizer插件会自动检测子页面的高度传给父页面，效果比较好不需要做过多的配置，强烈推荐此方案。

父页面: http://www.parent.com

<iframe src="http://www.parent.com/" frameborder="0" id="iframe" scrolling="no" width="100%"></iframe>  <script src="./iframeResizer.min.js"></script><script>iFrameResize({log:true});</script>

子页面: http://www.children.com

<script src="./iframeResizer.contentWindow.min.js"></script>

方法三：采用中转页面的方法

采用“迂回”的方式解决页面高度获取问题。在主页面的域下建一个空的页面，子页面引用这个空的页面，再通过传参的方式，将子页面的高度“告知”主页面，不推荐此方案

父页面：http://www.parent.com

<iframe src="http://www.children.com" frameborder="0" width="100%" id="iframe"></iframe><script type="text/javascript">function updateIFrame(height) {var iframe = document.getElementById('iframe-Scat');
        iframe.setAttribute('height', height);
    }</script>

子页面: http://www.children.com

拿到子页面的高度后将值重新赋给父页面下的空页面

<iframe src="http://www.parent.com/blank.html" id="resize-iframe" style="display: none;"></iframe><script type="text/javascript">window.onload = function() {var h  = document.body.scrollHeight;
        document.getElementById("resize-iframe").src = "http://domain1.com/c.html?height=" + h;
    }</script>

空页面：http://www.parent.com/blank.html

因为此页面和父页面是同源，这时就可以直接把高度传给父页面

<script type="text/javascript">window.onload = function() {var h = location.search.replace('?', '').split('=')[1];// parent.parent.document.getElementById("iframe-Scat").style.height = h + 'px';        window.top.updateIFrame(h);
    }</script>

原文链接：http://www.cnblogs.com/huoxiao/p/10368557.html