两个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%的人还看了以下文章

  • 12款纯CSS3实现的优秀导航菜单(含源码下载)

    选12款纯CSS3实现的优秀面包屑导航,只提供在线演示的面包屑导航,你可以点击在线演示,在打开的Demo页面中,右键另存为网页,即可得到源码。

    2022年5月10日 网页制作
    6340
  • 第10课:外边距和内边距

    上一课,你学习了盒状模型。在这一课,我们将了解如何通过设置margin(外边距)和padding(内边距)这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上(top)、下(bottom)、左(left)、右(right)四个边。外边距(margin)表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…

    2020年2月25日
    1.9K0
  • CSS Sprites:图片整合技术详细案例

    CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。介绍了CSS Sprites技术的实现方法,优点和缺点。最后通过实例CSS Sprites技术制作导航栏演示CSS Sprites的使用。 手把手,永哥教你学会css sprite(雪碧图)技术 CSS Sprites的原理:将小图片整合到一张大的图片上,根据具体图…

    2019年11月5日 网页制作
    1.8K0
  • JavaScript 向数组的开头或末尾添加元素:unshift() 、push()方法详解

    unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。 unshift() 实例: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>uns…

    2018年9月5日
    13.5K0
  • HTML5的视频播放控制技术

    介绍了HTML5的video元素和常用属性,以及视频播放控制技术,如播放、暂停、音量、全屏、回放功能的实现。

    2019年10月15日
    4.1K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    3.6K0

发表回复

登录后才能评论