iframe自适应高度怎么设置(js方法实现iframe 高度自适应)

 分类:html知识时间:2022-02-27点击: 2022前端视频教程(自学必看)

iframe自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹。用户体验更好和网站美观。如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高度。当内容是未知或者是变化的时候,这个时候就得更具子页面的高度来调节iframe的高,使得满足应该户的需求。

iframe自适应高度怎么设置

先前我在调试的iframe时候,要么iframe子页面的高度不能够加载,要么高度不能够自动调整,或存在浏览器兼容问题,现在找到了新的方式调整。

1.iframe自适应高度方法:

function setIframe() {
 var iframe = document.getElementByIdx("frameDetail");
 var bHeight = iframe.contentWindow.document.body.scrollHeight;
 var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
 var height = bHeight > dHeight ? bHeight : dHeight;
 iframe.height = height;
 }

2.使用如下:

<iframe src="url" id="frameDetail" name="frameDetail" onload="setIframe()" height="700px" width="100%" frameborder="0" scrolling="no"></iframe>
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: