使用window.onresize监听窗口大小的改变 实现iframe高度自适应

今天做项目要在网页中使用 iframe内嵌页面，

 <iframe id="ifr" src="modules/iframe/client/iframe.html" width="100%"  frameborder="0" name="mainframe" id="mainframe" scrolling="no"></iframe>

需要给iframe自适应高度，可以这样写：

 var ifr= document.getElementById("ifr");
        ifr.height=document.documentElement.clientHeight;

这样就可以动态设置iframe高度，但是如果将窗口放大或缩小，iframe窗口不会变换大小。需要再次刷新，那就不属于自适应了。

使用onresize 事件改造一下

【onresize 事件会在窗口或框架被调整大小时发生。】

将前面的代码 封装成函数，然后在iframe加载后 和窗口大小变化时执行该函数：

<iframe id="ifr" src="modules/iframe/client/iframe.html" width="100%" onload="changeFrameHeight()"  frameborder="0" name="mainframe" id="mainframe" scrolling="no"></iframe>

<script>


    function changeFrameHeight(){
        var ifr= document.getElementById("ifr");
        ifr.height=document.documentElement.clientHeight;
        console.log(ifr.height);

    }

    window.onresize=function(){
        // 监听div和屏幕的改变 并修改iframe的高度
        changeFrameHeight();

    }


</script>

这样  就实现了iframe高度自适应。