两个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 >

以上就是关于iframe自适应高度的全部内容了,希望对大家有所帮助,了解更多相关文章请关注125建站网|www.125jz.com!

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/9354.html

(0)
江山如画的头像江山如画管理团队
上一篇 2021年3月12日 上午8:58
下一篇 2021年3月24日 下午3:12

99%的人还看了以下文章

  • css布局基础-盒子模型

    网页设计的第一步就是设计版面布局,本文介绍了css布局基础-盒子模型,CSS盒模型是描述网页布局的视觉模型中网页元素的矩形盒状模型。盒模型由margin(边界)、border(边框)、padding(填充)和content(内容)4部分组成。

    2022年7月14日
    7230
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    6.8K0
  • Flex布局“弹性盒子”

    一.概念 flex布局: Flex Box 的缩写,意味“灵活的盒子”或“弹性盒子”,所以flex布局又称“弹性布局”。 flex容器 采用flex布局的元素,成为flex容器。display:flex; flex项目 flex容器的所有子元素自动成为容器成员,称为flex项目。 <div style=“ display:flex;”>   &l…

    2020年4月12日
    2.7K0
  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。  js全屏和退出全屏代码|www.125jz.com全屏显示退出全屏 还可以根据注释,实现整个网页进入全屏,还是指定某块区域全屏(根据区域ID指定),快来试试吧。

    2019年2月15日
    3.1K0
  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    2.4K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    4.1K0

发表回复

登录后才能评论