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.document
      var height = calcPageHeight(iDoc)
      if(height < 850){
      	height = 850;
      }
      ifr.style.height = height + 'px'
  }
</script>

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

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

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