php iframe 自适应高度,iframe自适应高度

很多小伙伴在做网站的时候对于解决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 >

4、效果截图：

以上就是吾爱编程为大家介绍的关于iframe自适应高度的全部内容了，希望对大家有所帮助，了解更多相关文章请关注吾爱编程网！