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中的内容封装为方法：

 function changeParent(){
      //    获取自己在父级页面中的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";
 }

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