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

Daming 2018-07-06
0条评论 1,816 次浏览
Daming 2018-07-060条评论 1,816 次浏览

今天做项目要在网页中使用 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高度自适应。

1+

发表评论

电子邮件地址不会被公开。