今天做项目要在网页中使用 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+
1.如需转载本站原创文章,请务必注明文章出处并附上链接,非常感谢。
2.本站用于记录个人 工作、学习、生活,非商业网站,更多信息请 点击这里
下一篇: 封装兼容低版本浏览器的事件监听函数