特定场景下的iframe自适应大小在做一个报表大屏，元素是其它页面引用过来的，因为iframe的嵌入关系，无法通过css

在做一个报表大屏，元素是其它页面引用过来的，因为iframe的嵌入关系，无法通过css直接控制iframe中的元素样式。可以在被引用页面上的元素大小设置成相对窗口大小的，这样，在主页面上引用的时候，会根据iframe标签的大小来确定被引用页的窗口大小，就完成了自动缩放。具体的做法是这样： ifram子素

伪代码
document.getElementById('app').height = window.innerHeight+'px';
document.getElementById('app').width = windwo.innerWidth+'px';

主页面

 <iframe src="http://localhost/xxxx/" frameborder="0" height="400"></iframe>

大概意思就是这样。我在报表中用了echarts，所以在又添加了一个监听页面大小的函数，可以动态调整echarts大小。

//参考代码
window.addEventListener(
    'resize',resizefunc,false
    );
function resizefunc(){
    myChart1.resize({width:window.innerWidth-20+'px',height:window.innerHeight-20+'px'});
}

高度.png 这样，就能设置iframe，里面内容自动会缩放成想要的大小，不会出现讨厌的滚动条了。需要的朋友参考一下