首页 > 其他分享 >两个iframe自适应高度的解决方法

两个iframe自适应高度的解决方法

时间:2024-04-06 20:13:17浏览次数:20  
标签:高度 适应 iframe document 方法 页面

许多开发者在处理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,document,方法,页面
From: https://www.cnblogs.com/nweb/p/18117853

相关文章