首页 > 代码库 > iframe自适应高度的问题

iframe自适应高度的问题

2024-07-10 00:20:39   229人阅读

最近工作中遇到了iframe自适应高度的问题。

如果在iframe中写定高度height的属性，并且iframe中内容高度小于给定的height时，会在手机浏览器中莫名的产生下拉框，造成体验度下降。

但是如果不去设定height的属性，iframe的高度始终维持在150px，这样的话我们只能够通过js动态的去改变iframe的高度，实现iframe的高度自适应。

 

高度自适应的本质就是通过内容高度，去设定iframe高度。

然而因为iframe中内容的背景色不一定和父级页面的一致，所以我们在内容高度小于屏幕高度时，使用屏幕高度为iframe的高度。

因而我们通过比较屏幕高度和iframe中内容高的方式，来确定我们iframe最终的显示高度。

父级页面中的iframe代码如下：

<iframe allowtransparency="true" id="content" name="content" src="xxx.html"  scrolling="no" frameborder="0" ></iframe>

获取屏幕尺寸的代码：

function getScreenSize(winObj){    var size = {            width : 0,            height : 0    }    // 获取窗口宽度    if (winObj.innerWidth){        size.width = winObj.innerWidth;    }else if ((winObj.document.body) && (winObj.document.body.clientWidth))        size.width = winObj.document.body.clientWidth;    // 获取窗口高度    if (winObj.innerHeight)        size.height = winObj.innerHeight;    else if ((winObj.document.body) && (winObj.document.body.clientHeight))        size.height = winObj.document.body.clientHeight;    // 通过深入 Document 内部对 body 进行检测，获取窗口大小    if (winObj.document.documentElement && winObj.document.documentElement.clientHeight             && winObj.document.documentElement.clientWidth)    {        size.height = winObj.document.documentElement.clientHeight;        size.width = winObj.document.documentElement.clientWidth;    }    return size;}

 

因为是每次iframe中内容改变的时候，需要iframe的高度自适应，所以我的自适应代码加在iframe中的页面中在页面加载结束后运行：

window.onload = function(){    //    获取自己在父级页面中的frame节点    var contentFrame = parent.document.getElementById(‘content‘);    //    获取屏幕高度    var parentScrHeight = getScreenSize(window.parent).height;    //    获取自己的内容高度    var contentHeight = document.body.clientHeight;    //    若是屏幕高，使用frame内容高度    //    若是frame内容高，使用屏幕高度    contentFrame.style.height = parentScrHeight < contentHeight ?            contentHeight + "px" : parentScrHeight + "px";};

以上步骤就完成了通过js控制iframe自适应的功能。

 

 

 


联系
我们