Iframe自适应高度

    最近一直忙于做Echarts图表，整体实现思路是将Echarts需要的Div容器放在Iframe中，然后在页面加载的时候加载Iframe，这样选择不同设备，展示不同的设备对应的报表即可，实现局部刷新。

    其中涉及到一个Iframe在父页面中自适应的问题，方案（推荐使用方案二）：

            1. 注意这里我有+150的操作，因为获取的高度不够，所以可以根据实际情况自己添加，这种方法的缺陷就是Bootstrap的响应式拉伸的时候并不能随着Iframe的高度变化而改变高度，灵活性不高，而且存在着不同分辨率下的高度不统一的情况，就是换个分辨率这个方法撑开的Iframe页面就不能完美撑开了。

function iframesize(iframe) {        //iframe的ID
            if (document.getElementById) {
                var ifra = document.getElementById(iframe);
                ifra.height = document.documentElement.clientHeight + 150;
            }
        }
        window.onresize = function () {
            iframesize('iframe');
        }

            2.这个方案可以完美的撑开Iframe页面，实现思路是在子页面中获取页面高度，获取到高度后，在子窗体中操作父窗体的Iframe控件的高度属性，同时添加一个窗体监控，这样页面拉伸时调用监控事件，这样就能动态改变Iframe的高度属性了。

//子页面代码
var height = $(document.body).height() +10;     //获取子页面的高度
        window.parent.changeHeight(height);             //调用父窗体的changeHeight()方法
        window.onresize = function () {                 //添加窗体监控
            var height = $(document.body).height() + 10;
            window.parent.changeWid(height);
        }

//父窗体代码
function changeHeight(height) {
            $("#iframe").css("height", height);     
        }
<iframe id="iframe" style="width: 100%; padding-left: 2%;" scrolling="no" frameborder="0"></iframe>