获取iframe实际高度

要解决的问题：iframe初始高度太小。想根据页面内容，自动撑开

HTML代码：

<iframe id="frame-content" scrolling="auto"  src="你的网页地址" frameborder="0"></iframe>

在iframe同页面 => JS代码：

// 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
  }

  var ifr = document.getElementById('frame-content')
  ifr.onload = function () {
    var iDoc = ifr.contentDocument || ifr.document || ifr.contentWindow
    var height = calcPageHeight(iDoc);
    ifr.style.height = height + 'px'
  }

---

注：
1、在使用这种方法之前，需要注意一个跨域的问题，被iframe引入的页面必须为同域页面。不然会报错

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

3、有时候可能需要改变iframe的内容，比如iframe中引入的A页面，高度为1000px、而B页面高度只有500px、这时候切换的时候，B页面即使重新计算了高度，也不会生效，默认继承了A页面的1000px、所以在切换页面的时候，最好就是手动设置一下iframe的高度，在进行计算。

---

**THE END**