iframe 高度根据子页面来确定

标题	描述
一、解决方法	解决代码
二、关于高度问题	简单讲一下jquery中的 `height()`，`innerHeight()`、`outHeight()`， js中的`offsetHeight`、`clientHeight`、`scrollHeight`。如何获取没有给出高度的元素的高度？详细介绍offsetHeight,clientHeight,scrollHeight之间的区别
三、试验历程	例举了一下我写这个遇到的坑，以及怎么得出最后的方案。

一、解决方法

因为我这是宽度已知，整体居中的布局，滚动条加在 iframe 标签上会很奇怪，而且iframe的高度不确定，所以滚动条只能加给父级body上。

//自动计算Iframe的高度
(function(){//根据ID获取iframe对象var ifr = document.getElementById('iframe-box');   ifr.onload = function() {  //DOM0级事件，没有兼容var timer = setTimeout(function(){clearTimeout(timer);//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow;var height = Math.max(calcPageHeight(iDoc));ifr.style.height = height + "px";},200)        }// 计算页面的实际高度，iframe自适应会用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);var height  = Math.max(cHeight, sHeight);return height;}
})();

注意：
（1）iframe 是双标签，需要结尾：<iframe></iframe>
（2）iframe 标签中的 scrolling 要为 “no”，禁止 iframe 的滚动条；
（3）记得使用延时器，因为 iframe 中有异步操作，iframe中的DOM结构和资源加载完成，可能异步还没有执行完，所以用延时器改变一下加载 iframe 子元素高度的顺序。
（4）如果需要对同 iframe 做相同事件，但是逻辑不同的操作，使用事件监听。

//事件监听的封装函数---通过事件监听写的逻辑操作也称 DOM2级事件。DOM2级事件存在兼容问题
function addEvent(ele,type,callback){
if(ele.addEventListener){
ele.addEventListener(type,callback,false);
} else if(ele.attachEvent){
ele.attachEvent("on"+type,callback);
} else {
ele["on"+type] = callback;
}
}
//使用
addEvent(obox,"click",function(){
console.log(1);
})

（5）有时候本地调试的时候，比如打开的文件在浏览器开头为 file:// 浏览器也会默认为跨域页面，这时候只需要自己搭建一个服务器环境（phpnow之类的都可以），就可以了；
（5）jquery 写 onload 事件的写法：

$("#iframe").load(function(){//...
})

（6）可参考资料：iframe 动态onload事件处理方式
（7）其他：图片onload事件详解，兼容所有浏览器！

二、关于高度

如何获取没有给出高度的元素的高度？

alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

三、试验历程

1. 参考怎么让iframe的高度和宽度可以100%

<iframe  name="right" id="center_cent" src="center/center0.html" width="100%" frameborder="0" onload='this.style.height=Math.max(this.contentWindow.document.body.scrollHeight,this.contentWindow.document.documentElement.scrollHeight,200)+"px";  '>
</iframe>

这里 onload 中写的是 this.style.height，有的是直接写this.height，二者的区别是，前面是给 iframe 添加 css 样式，把 height 作为 css 中的属性。后者是把 height 当做 iframe 标签中的内置可见属性，

一开始参考这里面的代码，发现有个问题：
当iframe 中有异步操作时，高度获取有时候不准确，不是子页面的实际高度；当网速较慢时，高度几乎都能计算出并获取子页面的高度。

2. 参考iframe嵌套界面自适应，可高度自由收缩

之后参考了这个博主的文章，但是还是会碰到上面的问题，只是会给页面一个固定高度，当我子页面的高度>这个固定高度时，子页面多出的部分会被隐藏掉。

<script>// 计算页面的实际高度，iframe自适应会用到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight)var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight)var height  = Math.max(cHeight, sHeight)return height}//根据ID获取iframe对象var ifr = document.getElementById('iframe-box');ifr.onload = function() {//解决打开高度太高的页面后再打开高度较小页面滚动条不收缩ifr.style.height='0px';var iDoc = ifr.contentDocument || ifr.documentvar height = calcPageHeight(iDoc)if(height < 850){height = 850;}ifr.style.height = height + 'px'}
</script>

3. 解决首次弹出层iframe框架时，iframe框架所调用的页面高度和宽度取不到的问题

然后发现了这篇文章，上面问题导致的原因，可能是获取高度和iframe加载的顺序上面不对，通用延时函数setTimeout来调整执行顺序即可解决。

 $(function () {setTimeout(function () {//在这里就可以获取到页面元素高度}, 0);
});