iframe自适应高度的问题

最近工作中遇到了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自适应的功能。

 注： 当页面中有需要动态加载内容是，页面内容高度会进行改变，这时就需要将以上onload中的内容封装为方法：

 1 function changeParent(){

 2      //    获取自己在父级页面中的frame节点

 3     var contentFrame = parent.document.getElementById('content');

 4     //    获取屏幕高度

 5     var parentScrHeight = getScreenSize(window.parent).height;

 6     //    获取自己的内容高度

 7     var contentHeight = document.body.clientHeight;

 8     //    若是屏幕高，使用frame内容高度

 9     //    若是frame内容高，使用屏幕高度

10     contentFrame.style.height = parentScrHeight < contentHeight ?

11             contentHeight + "px" : parentScrHeight + "px";

12 }

当每次页面进行内容改变时，就可以调用chagneParent方法进行动态的自适应改变。