当前位置：首页 > 新闻资讯>>在不同的浏览器中如何让iframe自适应高度呢？

在不同的浏览器中如何让iframe自适应高度呢？

作者：郑州网站建设发布时间：2023-09-03 16:36:43查看次数：来源：网络文章数：

为什么需要使用iframe自适应高度呢？
其实就是为了美观，要不然iframe和窗口长短大小不一，看起来总是不那么舒服，自适应高度对于用户体验度的提升尤为重要。
网上关于iframe高度自适应的代码有很多，但比较杂乱，有一些过于复杂，有一些存在明显错误。缘由心生给出了一段修改后的精简版本，感觉不错，并简单修正了其中一处Opera下的错误。

在不同的浏览器中如何让iframe自适应高度呢？(图1)

首先设置样式:body{margin:0; padding:0;}
如果不设置body的margin和padding为0的话，页面上下左右会出现空白。

html代码如下：

<iframe src="https://" id="myiframe" scrolling="no" onload="changeMyFrameHeight()" frameborder="0"></iframe>

js代码也得跟着改：

function changeMyFrameHeight(){
    var ifm= document.getElementById("iframepage"); 
    ifm.height=document.documentElement.clientHeight;

}

window.onresize=function(){  
     changeMyFrameHeight();  

}

window.onresize的作用就是当窗口大小改变的时候会触发这个事件。

所以，使用此方法可以完美的、真正的让iframe自适应高度了，试试看吧，并且兼容多种浏览器。

站内文章：均为188bet博彩体育app下载方式各部门原创内容如需转载请著名本文网站链接：//www.mcissock.com/new/24661.html未经允许转载要受法律责任,如需转载请联系269247937@qq.com