许多开发者在处理iframe高度时常感头痛,今日特为诸君介绍iframe自适应高度之法,有需要的小伙伴可以参考一下:
1、需求分析:
使页面中的iframe可以自适应高度,避免页面高度增加的时候页面和iframe会同时出现滚动条。
2、方法一:
在iframe上面直接加onload的方法,使其自适应
<iframe id ="iFrame1" name ="iFrame1" width ="100%" onload ="this.height=iFrame1.document.body.scrollHeight" frameborder ="0" src ="/php/" > </iframe>
这里我们主要是使用了iFrame1.document.body.scrollHeight获取高度然后调整当前iframe的高度
3、方法二:
使用window.onresize检测到当前窗口改变大小的时候触发我们写好的js事件,使其高度自适应
<iframe src="/php/" data-ke-src="/php/" id="iframes" scrolling="auto" frameborder="0"></iframe> <script type="application/javascript"> function setIframeHeight(iframe) { if(iframe) { iframe.height = document.documentElement.clientHeight; } }; window.onload = function () { setIframeHeight(document.getElementById('iframes')); }; </script >