标签：高度自适应 style blog color 使用 width
最近工作中遇到了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自适应的功能。
标签：高度自适应 style blog color 使用 width
原文地址：http://www.cnblogs.com/goupb/p/3813186.html
