当前位置:首页 > 网页设计 >HTML >

iframe自适应高度

发布时间:2020-12-18 13:59:18 作者:佚名 阅读:(28)

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


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

欢迎分享转载→ iframe自适应高度

© 2015-2021 - 吾爱编程网 版权所有 苏ICP备18033726号-1关于我们 - 网站声明 - 联系我们